Pressing device back button instantly closes app when navigator’s page stack count > 1 and there is toast displayed using ons.notification.toast()

[icaru12]

Environment

Onsen UI Version:

• 2.9.2

Framework:

• None

Framework binding:

• None

Additional libraries:

• None

Platform:

• Android 7.0 Cordova, Windows 10 Chrome

Encountered problem

Pressing device back button or ESC instantly closes app when navigator’s page stack count > 1 and there is toast displayed using ons.notification.toast().

Expected: Pop the current page from the navigator's page stack instead of closing the app.

How to reproduce

1. Open Chrome on desktop.
2. Go to the Onsen UI Playground and choose the Vanilla JS Kitchensink Example.
3. Find ons.notification.toast in the HTML editor and remove the timeout property, then click Run.
4. Open browser JS console.
5. In the Preview, go to Dialogs and click the "Toast" button.
6. Press ESC, "Could not close the app..." message appears in console. In a real device when we press device back button, the app closes instantly.

[asialgearoid]

Thanks for the report @frosdqy, this is a good find. I had a quick look, and it could actually be a bit awkward to fix given how we currently handle the back button.

The problem is that ons-toast is created as a child of body, along with ons-navigator. When the toast receives the back button event, it passes it straight to its parent, which is body. When body receives a back button event, it closes the app. What we need is to pass the event to ons-navigator in a sensible way. Right now I can't think of a good way to do that.

[icaru12]

Hi @asialgearoid, currently I'm using this workaround:

ons.notification.toast(options);

var nav = document.querySelector('#appNavigator');
var toasts = document.querySelectorAll('ons-toast');
var lastToast = toasts[toasts.length - 1];
lastToast.onDeviceBackButton = nav.onDeviceBackButton._callback.bind(nav);

Explanation: After calling ons.notification.toast(), find the created ons-toast and set its back-button handler to navigator's back-button handler. But it's not an elegant solution to the problem 😅

Maybe add a new option onDeviceBackButton to ons.notification.toast() method's options parameter? So we can set custom back-button handler for toasts created by the method, like so:

var nav = document.querySelector('#appNavigator');

ons.notification.toast({
  message: 'Test',
  timeout: 2000,
  onDeviceBackButton: nav.onDeviceBackButton._callback.bind(nav)
});