ons.createPopover and device Back button

Sergey

Hello

The ons.createPopover returns a promise for created popover and (as described in the documentation) can be displayed with .then(function(popover){popover.show()...})
Should the show method ALWAYS be called immediately after createPopover?
If I use createPopover for templates preloading on app startup and delayed show call I see very strange behavior - each createPopover call is increment device Back button counter even if I did not show popover on the screen. But I want to show popover some time later on button click (I can get popover with document.getElementById and call show).
For example if I preload 3 popover templates:

ons.createPopover('popover1.html');
ons.createPopover('popover2.html');
ons.createPopover('popover3.html');

3 device Back button taps are needed to close the application (or to return to the previous page if I called pushPage before). IMO device Back button counter should be incremented on popup displaying (not on template loading).
Is it a bug or createPopover does not designed for delayed show call?

P.S. Is ons.createDialog have the same behavior?

Sergey

Any ideas?

Fran Diox

@Sergey Their default handlers are this.onDeviceBackButton = e => this.cancelable ? this._cancel() : e.callParentHandler();.

I think something like this should work: popover.onDeviceBackButton = e => popover.cancelable && popover.visible ? popover._cancel() : e.callParentHandler();.

This is not very common but perhaps we should set the last code as default.

Sergey

@Fran-Diox Thanks!

Should I create a issue on the GitHub?

Fran Diox

@Sergey Sure. Please try the code and tell me if it’s enough for that case.

Fran Diox

@Sergey Actually I cannot reproduce this issue on my Android device. It works as expected. The popover/dialog handlers are not called unless they are visible…
I’m not sure under what circumstances this occurs.

Sergey

@Fran-Diox

I can stable reproduce this issue with the current Monaca settings for new app and this index.html:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
      
    ons.createPopover('popover1.html');
    ons.createPopover('popover2.html');
    ons.createPopover('popover3.html');
    
    });
  </script>
</head>
<body>
  This is a template for Onsen UI app.
  
<ons-template id="popover1.html">
    <ons-popover direction="down" cancelable cover-target id="popover1">
        Popover1
    </ons-popover>
</ons-template>  

<ons-template id="popover2.html">
    <ons-popover direction="down" cancelable cover-target id="popover2">
        Popover2
    </ons-popover>
</ons-template>  

<ons-template id="popover3.html">
    <ons-popover direction="down" cancelable cover-target id="popover3">
        Popover3
    </ons-popover>
</ons-template>  

</body>
</html>

I have to do 4 taps on the device Back button for closing the app.

I see this issue for debug build and in the custom debugger.
LG G3, Android 6.0

Moreover I did a project export and you can download it here.

P.S. And yes - if I change code as you suggested above

    ons.createPopover('popover1.html').then(function(popover) {popover.onDeviceBackButton = e => popover.cancelable && popover.visible ? popover._cancel() : e.callParentHandler();});
    ons.createPopover('popover2.html').then(function(popover) {popover.onDeviceBackButton = e => popover.cancelable && popover.visible ? popover._cancel() : e.callParentHandler();});
    ons.createPopover('popover3.html').then(function(popover) {popover.onDeviceBackButton = e => popover.cancelable && popover.visible ? popover._cancel() : e.callParentHandler();});

In this case I don’t see this issue and the app is closed on the fist Back button tap.

Fran Diox

@Sergey Hey! Thanks a lot for the report and the project. I’ve tested it and I could see the issue. However, I just uploaded the latest version of Onsen UI (2.1.0) and removed the one included in your project (2.0.3) and everything works again.

Try to update the version and check if it works :)

Edit: Actually it’s not fixed in 2.1.0, but in development version! I guess it will require some time to be released.

Sergey

@Fran-Diox Thanks! I’ll wait for version update.
Moreover, 10 days ago I asked this question regarding Onsen UI version in the Monaca IDE, but currently 2.0.3 included in all new projects.

Sergey

@Fran-Diox is this problem solved in the latest release?
Yesterday I again encountered this problem in a slightly different situation - when <ons-popover> is simply declared in the body without a template, the Back button does not call the page back-button handler and immediately calls the default application handler instead.

Fran Diox

@Sergey I think it was fixed, yes. Have you tried the last version already?

Sergey

@Fran-Diox I use Monaca Cloud IDE. My project was generated with Onsen Ui version 2.0.3.
Please can you explain what is right procedure for upgrading to newest version?
Should I delete current lib/onsen folder from project and upload it again from new version? Or replace some JS or CSS files only?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons.createPopover and device Back button