Android: Back button not dismissing modals

[infinnie]

Short description of the problem:

I wrote an app with a modal that is expected to be dismissed with either its own “cancel” button or the hardware back button. However since an upgrade to Ionic 2.0.0 RC 1, it couldn’t be dismissed with the hardware button, but will quit within several presses with the modal present instead. If I manually dismiss the modal after pressing the back button, I could find that the page present is different from the one I opened the modal with, but some previous page.

Nor do hardware back buttons dismiss loading indicators.

What behavior are you expecting?

As in Ionic 2.0.0 Beta 10 and 11 (forgotten what happened on RC 0), the modal is dismissed with the hardware back button pressed.

Steps to reproduce:

1. Write an app with a modal
2. Build and run it
3. Open that modal
4. Press the hardware back button and see what would happen.

Which Ionic Version? 1.x or 2.x 2.0.0 RC 1

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information: 

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v6.3.1

Android 4.4.4

[comfortme]

i think it is related with modal not having a ion-nav of its own again.

[infinnie]

@comfortme What did you mean by “again”? Just curious.

[comfortme]

there are couple of issues about modals navigation and i think they might be related to yours. https://github.com/driftyco/ionic/issues/8151#issuecomment-252664109

[jgw96]

@manucorporat should this be fixed by your modal navigation stuff you working on? @infinnie could you provide a repo we could use to reproduce this issue? Thanks!

[infinnie]

@jgw96 Just build anything that contains a modal for Android.

[laserus]

Here is one example of register back button, that handles everything: https://github.com/driftyco/ionic/issues/6982#issuecomment-254740855

[daveshirman]

@laserus That's not a solution though, that's a workaround. This is definitely a regression bug in the framework.

[laserus]

@daveshirman yes and no. For modals it is a regression bug, for not-closing-menu-on-back-button it is how driftyco guys see it, for custom alert confirmation on particular pages it is not a bug, but customization (what the backbutton handler is in the first place for).

If you will need to have a custom back button you will end up with similar approach independently of weather there is a bug in modal or not. Unless ionic2 will have some more generic mixing action handling back button (current priority on back button actions does not work for this at all).

[moldstadt]

I have the same issue when pushing a page onto the app root. I have a tabs application, and what seems to happen is that after pushing a page onto the root with this.app.getRootNav().push(NewPage); pressing the back button moves back through the previously selected tabs (in the background). Only after all the tab history is done, does the new page get dismissed, showing the first tab in the app.

[dgroh]

This has nothing to do with back button, but I'm also not able to dismiss the modal, I have issued this (https://github.com/driftyco/ionic/issues/8776) and created a demo repo, so anyone can have a loot at it, this is really a nightmare for us now.

[infinnie]

@dgroh That would be another thing.

[lincolnthree]

I can confirm that my modals are also not closing via the back-button, on a pretty vanilla (no plugins or JS/css customizations) RC.1 app.

Google Nexus 6. Android 6.0.1

[martin-eberle]

I can confirm this as well. Ionic 2 RC.1 on latest Android N.

[dylanvdmerwe]

We are also experiencing this on Android. Any ideas on resolution @manucorporat or @jgw96?

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.8.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[akaamitgupta]

I can confirm this as well. Ionic 2 RC.1 on Android devices.

[infinnie]

Not fixed even in RC2…

[jgw96]

@manucorporat any ideas what may be causing this? Is this expected behavior with modals being separate from the main nav?

[infinnie]

@jgw96 Certainly not, if you mean “conforming to the corresponding platform’s recommended behavior for apps” by “expected”. In native Android/WP apps, the hardware back button is intended to be used to dismiss modals if present. Popping up the underlying page without dismissing the modal only makes the whole app confusing.

[jonatastrafaniuc]

Same problem here. RC 2

[Gp2mv3]

Same for me with RC 2.

[marcusforsberg]

Is this expected behavior with modals being separate from the main nav?

This is definitely not expected behaviour, it's really confusing behaviour! 😄

[yannbf]

Is this ever going to be discussed for a fix? RC2 at the moment, and this behavior is the same since I started developing, back in Beta11. I personally think it's not supposed to be an expected behavior, it's rather weird. I have tested every app in my phone and used back button on modals and they all dismissed, rather than popping the nav of the page underneath it.

[peterpeterparker]

The system Back button is used to navigate, in reverse chronological order, through the history of screens the user has recently worked with. It is generally based on the temporal relationships between screens, rather than the app's hierarchy.

Android source: https://developer.android.com/design/patterns/navigation.html

If we agree that a modal is a "screen", than it means that the hardware back button should close modals too.

Furthermore, in all the examples listed in the above listed documentation, the hardware back button is never displayed as triggering backs in the background of an opened screen.

So more than just the UIX behavior I may have been excepted, I think that this should be improved to fits the Android guidelines.

Thx in advance for finding an awesome solution as you always do Ionic team ;)

[infinnie]

@manucorporat assign a milestone and fix the problem please. This behavior is annoying and confusing as everybody here reporting the problem knows.

[infinnie]

Not fixed even in RC3…

[infinnie]

@adamdbradley @brandyscarney @manucorporat @danbucholtz @jgw96

Just do something please. If this issue were not solved, I’m afraid that nobody would be willing to use Ionic 2.

[daveshirman]

I have to chime in here. Unfortunately this is a serious issue and needs fixing. There is no possible good reason why the back button shouldn't close a modal. It literally makes no sense. This issue is an absolute deal breaker for pushing apps live and needs to be prioritised above style fixes and other component enhancements please.

[naveedahmed1]

Issue still exists in RC 3

[peterpeterparker]

thx @manucorporat and ionic team for working on it and adding a milestone 👍

[jabas06]

It will be appreciated if you include this issue too #7611. There are another issues about the back button, for example, the side menu is not getting closed when the back button is pressed.

[Fdom92]

like @jabas06 says if i open my sidemenu and press backbutton it close the app not the sidemenu. ty btw to adding it into RC4 milestone :+1:

[NeoLSN]

I can accept that the modal can not be dismissed when user click back button. But I also think to provide an option for modal, like canDismissByBackButton, default is false. The purpose of modal is you want to force showing something not in main app flow. Ex. Password guard, new terms agreement page, ..., etc. Those is not main app flow. You don't want to user continued use your app until they finish those work on page.

There is still a bug on back button click when a modal shows. If you use modal's navigator to open a new page, when click back button it will also affect app rootNav.

[daveshirman]

@NeoLSN sorry, but that just doesn't make sense.

The back button is a system button. Its purpose is to go back a screen. Every Android app that I use dismisses modal screens when pressing the system (hardware/software) back button.

If anything, it should be TRUE by default with an option to set to FALSE to force interaction with the modal. But personally I don't even see that it should be an option.

Just trying to make the case clearer for the Ionic team here.

[NeoLSN]

@daveshirman There is no definition for UI about UI must or must not be dismissed by back button in Android. The lock screen is the best example of modal. This is a screen almost all mobile users will see everyday. This is a special screen for Android and you can not skip or press back to ignore those kind of screen.

My personal opinion is the modal's behavior is more like a Dialog in Android. And there is an option you can set to ignore back button. https://developer.android.com/reference/android/app/Dialog.html#setCancelable(boolean) I can agree you to set the default value to true, just provide an option let developer can choose.

[infinnie]

@NeoLSN But ignoring the back button is not dismissing the page underneath!

[NeoLSN]

Yes, I know that. And dismiss the page underneath is still acceptable. A lot of IM apps has password guard. When that kind pages showing, it will dismiss the chatroom page which is a page underneath if a user click back button. The modal should give options to developers let developers can decide what to do in app.

[infinnie]

@NeoLSN This is an extreme case that is rarely met and had better be manually implemented. And even so, the expected behavior of the IM app’s password guard, in my opinion as someone who has never used such a feature, should be that the app with that page on the top returns to the homepage immediately as if it were the root page.

[manucorporat]

This issue was a regression caused by this: https://github.com/driftyco/ionic/commit/e2704a4a25b9e348764e1cc922ca7d6a927550eb

Working in a solution, expecting to have this fixed today

[manucorporat]

Fixed!

[dylanvdmerwe]

@manucorporat you're a star!!

[Fdom92]

this solves the issue with sidemenu too? or just fixed modals

[manucorporat]

@Fdom92 only modals. How should it behave with sidemenus?

should it close the menu, then go back? or only close the menu?

[Kobzol]

Only closing the menu seems reasonable to me, this is the behaviour that I see with pretty much any Android app using the drawer menu.

[dylanvdmerwe]

@Kobzol this should probably be logged as a seperate issue. But yes you are correct. Pressing the back button should close a side menu.

[Kobzol]

There's already an issue for multiple backbutton issues on Android here (#7611), although there's no activity there.

[yannbf]

@manucorporat Thank you so much for your time! It really helped many people that needed that feature. In regards to the sidemenu, native apps do only close the sidemenu. It would also be really nice if you guys could take a look at #7611!

I don't know, sometimes I feel that the majority of ionic team are ios users, because these kinds of behaviors are supposed to be common.

[Fdom92]

@manucorporat i think it should close only the sidemenu. You can see it in gmail app, you open the sidemenu and when you press backbutton only close the sidemenu.

[manucorporat]

@Fdom92 @yannbf @Kobzol @dylanvdmerwe thanks a lot for your time! take a look! sidemenu and modal are fixed! https://www.dropbox.com/s/ybkcccdb2yiycvd/hardware_button.mov?dl=0

[yannbf]

@manucorporat On behalf of humanity, we love you!

One thing though, what happens now when you press back button and you are on home? I noticed at the end of the video that you press and nothing happens. Thanks!!

[dylanvdmerwe]

@yannbf In ionic serve the app obviously won't close. On a device though it will.