Ionic-framework: Android: Back button not dismissing modals

Created on 14 Oct 2016  ·  76Comments  ·  Source: ionic-team/ionic-framework

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

Most helpful comment

@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

All 76 comments

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

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

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

@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!

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

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

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

@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).

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.

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.

@dgroh That would be another thing.

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

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

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

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

Not fixed even in RC2…

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

@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.

Same problem here. RC 2

Same for me with RC 2.

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

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

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.

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 ;)

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

Not fixed even in RC3…

@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.

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.

Issue still exists in RC 3

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

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.

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:

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.

@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.

@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.

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

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.

@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.

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

Fixed!
dec-02-2016 10-20-39

@manucorporat you're a star!!

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

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

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

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.

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

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

@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.

@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.

@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

@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!!

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

Exactly, on device it will close the app depending if 'navExitApp' config is true. But in the browser it just does nothing.
BTW, here's the commit: https://github.com/driftyco/ionic/commit/8de253a9b1216c64eba53e87ca96febb72de42f0

It is already in master, expecting to release a new nightly today.

It makes a lot of sense. For some reason I didn't notice the inspector. Thanks once again!

@manucorporat thans to you for make this really. I know you will do this so perfecto cause you are from spain right? Ole jajaja thanks for tour job. I will be waiting this, it will be on the RC4 right?

@Fdom92 olee! that's right! I am from Spain :)

Yeah! It was already merged in master, so it will part of the next release!

@manucorporat muchas gracias por tu trabajo de verdad tío :) i cant wait for it :)

@manucorporat I'm sorry for briging this up again, but in your fix, does the back button also happen to dismiss an ion-date picker? I just noticed that if I bring up the date picker and press back, it pops the page rather than dismiss the picker.

I know it's not related to modal, but still, perhaps it's an easy thing using the fix you've developed for modals/sidemenu.

Thanks!

@yannbf That sounds like a regression, it did this in beta, but in RC.2 the date picker was being dismissed by the back button if I recall correctly.

@yannbf @Kobzol please read my comments: https://github.com/driftyco/ionic/issues/7824#issuecomment-265401532

Also, can you try the latest nightly? it should not pop the page behind the picker.

I'm using rc4 and I'm still facing this bug when on a modal.

This issue still exists on rc4

I can confirm it has been fixed and working properly.

I confirm that its resolved on RC4, now my sidemenu its closed when i press on hardware back button, and modals too! :)

I can confirm that it isn't resolved for modals, if you have a modal
present and pressed the hardware back button, the modal isn't dismissed.

On Dec 18, 2016 3:49 PM, "Fernando del olmo" notifications@github.com
wrote:

I confirm that its resolved on RC4, now my sidemenu its closed when i
press on hardware back button, and modals too! :)


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/8692#issuecomment-267819349,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AK49WxnrNE867XJkliPrZCmdER7qLfHuks5rJSvGgaJpZM4KWsVK
.

@OmarHassan25 please output your ionic info.

@dylanvdmerwe
Well since I also have the same issue, I'll also post my ionic info here:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed

@dylanvdmerwe
Here is my ionic info,

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.39
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

On Sun, Dec 18, 2016 at 4:34 PM, AleFons notifications@github.com wrote:

@dylanvdmerwe https://github.com/dylanvdmerwe
Well since I also have the same issue, I'll also post my ionic info here:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/8692#issuecomment-267821462,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AK49WxTuREMG36EcDDaw10BHI_3t60RWks5rJTZQgaJpZM4KWsVK
.

The problem has solved itself for me; I don't know how, exactly.

I believe it may have been an error with plugin inconsistency. Or maybe it was that I changed the version number.

Is this definitely fixed? I seem to have encountered this issue today. My ionic info is as follows:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.2.1 Build version 8C1002

I am facing this problem too.

@amility: no one from Ionic team will reply to you here. They stopped addressing the community ages ago. Advice is to work around the bug as they clearly won't fix it. Even better, choose a different framework like Flutter before you get too far down dev in your app.

Really? Ionic team stopped supporting their project. Its quite unbelievable as I can still see their recent replies on latest closed issues.

I didn't say that. I just think their support and quality control is lousy
at the moment and has been for a while. Feel free to take a look at my open
issues, notice the date posted and lack of replies, from even the simplest
of things.

Take a glance at how many issues there are here with Virtual Scroll. No
replies. These are basic things in the framework that should just work.

Just my two cents.

On 7 Mar 2018 9:15 am, "amility" notifications@github.com wrote:

Really? Ionic team stopped supporting their project. Its quite
unbelievable as I can still see their recent replies on latest closed
issues.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/8692#issuecomment-371073834,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ANnlXsGwJVyMqFrBZIQ1nqr5WJOUeyrTks5tb6U6gaJpZM4KWsVK
.

Its strange. Its the widely known framework for hybrid apps and many apps are based on it. It will create problem in future if team will leave to support it.

Hey there folks! Just to chime in on this.

We’re sorry that the team has been quiet lately. The fact is, we've been going through the entire core of the framework and rewriting it to use web components. This has been our main focus for the past few months and I’m confident you are going to love it when it’s ready (soon!).

While the rework is going well, we do notice that issues keep coming through at a rate that makes it hard to triage and focus on work on the framework at the same time. So we've made the decision to "freeze" ionic until we can get V4 out. While this is a tough thing to do and is a difficult decision, it is needed as we the team need to focus on the new release, which will address many of the outstanding issue (like virtual scroll).

Ok, so what are you going to do about this in the future?

Great question 😄 ! We're reworking our process of dealing with issues and introducing a Bot to help automate a lot of this. This means that we'll get to a point where we can respond to issues and have all of the information/data needed in order to debug and fix the issue. This so far has been the biggest pain point when dealing with Github's current issue process. We're very hopeful that this bot will improve our process and help resolve issues much quicker!

We'll be releasing our updates on the whole process on our blog, so please keep an eye out for it.

To wrap up...

  • We're sorry we've been silent and not responding to issues. We're actively working to improve this process.
  • We're NOT abandoning the project. We're doubling down on our efforts to better manage things!

If you have any question/concerns, please feel free to send me an email. mike at ionic dot io

Cheers!

Nice to hear that Mike. Its such a great relief that you people are gonna make it much better soon. Dying to see new version soon. I hope one day we will be able to make hybrid apps using ionic which is not behind native apps. Best of luck !

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

masimplo picture masimplo  ·  3Comments

daveshirman picture daveshirman  ·  3Comments

gio82 picture gio82  ·  3Comments

alan-agius4 picture alan-agius4  ·  3Comments

Nick-The-Uncharted picture Nick-The-Uncharted  ·  3Comments