Modal not closed by hardware back button

Ionic Framework ionic-v3
1

I believe the expected functionality (on android that has the hardware back button) would be the back button to close the modal, but the modal stays open and the navigation in background moves one step back. Had to manually override all modals to implement the functionality.

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.1 (2016-10-13)
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.34
OS:
Node Version: v4.6.0
2 Likes
2

Hi, why add global event listened?

For made what you want? Itā€™s what I use for made this.

3

Iā€™m facing this exact behavior.

Android HW back button closes the parent window (even the app) while the modal stays open. Shouldnā€™t it close the modal? I believe it to be same for Alerts and other ā€œpop-upsā€.

In any case, @ludovicevrard , I donā€™t see the relation with the event listener. Are you suggesting to capture the back button event? I am doing so with registerBackButtonAction but the modal does not appear to be in my tab navigation stack.

4

Yep, an issue exist in the Ionicā€™s GitHub

1 Like
5

@reedrichards thanks for pointing this out. The activePortal part of the laserus solution here https://github.com/driftyco/ionic/issues/6982#issuecomment-254740855 solved my issues.

6

Thx for pointing that, that good be a workaround.
In my case I will still wait a while to see if the Ionic team comes with a fix in one of the next release (finger crossed ;))

7

I have solved this by registering a back button action in the modal constructor:

this.unregisterBackButtonAction = platform.registerBackButtonAction(() => {
this.dismiss(null);
});

and then unregistering it on modal dismissal:

dismiss(submit) {
if(this.unregisterBackButtonAction)
this.unregisterBackButtonAction();
...
}
1 Like
8

Is anyone still getting this issue? Iā€™ve only just noticed it on one of my apps today. Basically the hardware back button fails to close/dismiss the modal, and instead navigates BACK for the page behind the modal.

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
9

Ionic 3 Try This Code it Works perfectly


          //Check Hardware Back Button Double Tap to Exit And Close Modal On Hardware Back
          let lastTimeBackPress = 0;
          let timePeriodToExit  = 2000;
          this.platform.registerBackButtonAction(() => {

              let activePortal = this.ionicApp._loadingPortal.getActive() || // Close If Any Loader Active
              this.ionicApp._modalPortal.getActive() ||  // Close If Any Modal Active
              this.ionicApp._overlayPortal.getActive(); // Close If Any Overlay Active

              if (activePortal) {
                  activePortal.dismiss();
              }
              else if(this.nav.canGoBack()){
                this.nav.pop();
              }else{
                  //Double check to exit app
                  if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
                      this.platform.exitApp(); //Exit from app
                  } else {
                    this.toast.create("Press back button again to exit");
                    lastTimeBackPress = new Date().getTime();
                  }
              }            
          });
1 Like
10

Thank you @conceps. But I have small problems
When any model opens, on first back key press it backs the Page and on second back press only Model closes.
and my second problem is that with same else code I am not getting second press option but app exit.

11

I think the Second Problem is you are not properly importing toast

import { ToastController } from 'ionic-angular';
constructor(public toastCtrl: ToastController) {
  }

let toast = this.toastCtrl.create({
      message: 'Press back button again to exit',
      duration: 3000
    });
    toast.present();

I think the First Problem is modal dismiss check the if else condition properly based on your needs.
are you use this code in app.component.ts after platform ready.
Lets try it.

12

can you please tell me what is this.ionicApp here so as to access _overlayPortal as it is showing me error as

Property ā€˜ionicAppā€™ does not exist

13

I would imagine it is

import { App } from 'ionic-angular';
...
 constructor(
   ...,
    private ionicApp:App
  ) {
...
}

but I donā€™t see _modalPortal property on it :open_mouth:

1 Like