Ionic-framework: hardware back button doesn't dismiss ActionSheet overlay

[brettatoms]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
The hardware back button doesn't dismiss an ActionSheet on Android.

Expected behavior:
Tapping the hardware back button while an ActionSheet is currently visible would dismiss the ActionSheet.

Steps to reproduce:

1. Open action sheet.
2. Tap hardware back button

Related code:

Quick and dirty fix is:

    this.platform.registerBackButtonAction(() => {
      const overlayView = this.app._appRoot._overlayPortal._views[0];
      if (overlayView && overlayView.dismiss) {
        overlayView.dismiss();
      } else {
        this.app.goBack();
      }
    }, 0);

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.6
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.9
OS: OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Thanks for opening an issue with us! We will look into this! (:

[jgw96]

I can confirm that this is how native android works.

[manucorporat]

yes, I disabled this feature, because the way it was implemented was kind of buggy. It is in my roadmap to refactor it

[daveshirman]

This is NOT how native Android works. It was a deliberate decision mentioned in a recent release to disable the back button for ActionSheet and overlays, waiting for refactoring.

[jgw96]

Sorry @daveshirman , i meant that i can confirm that on native android you can close the actionsheet with the back button

[daveshirman]

@jgw96 Sorry, my bad! We're all good.

[Ronald-13]

Also, It would be nice to get the control of the pop up which are initiated from html, so that we can dismiss them programatically.

[lepetitpaco]

Can you disable completly the back button on all pages of the application ?
If yes, where, how ?

[Ronald-13]

@DavidGennaoui Yes, you can disable backbutton action entirely.

//app.component.ts
import { Platform } from 'ionic-angular';
export class MyApp {
constructor(public platform: Platform){
}
backButtonController() {
this.deregisterBackButtonAction = this.platform.registerBackButtonAction(() => {
//perform actions when backbutton is pressed
}, 1);
}

ngOnDestroy() {
this.deregisterBackButtonAction();
}
}

[Muji86]

@jgw96 this is also an issue on Alerts

[alexnu]

Hi,

So is this going to be fixed?

[AmitMY]

@manucorporat Just created a simple fix for overlays, like alerts, popover, etc..

[lostdev]

Looking forward to seeing this fixed. User experience is a little dodgy due to this.

[PabloJC]

This fix work for me:

import { IonicApp } from 'ionic-angular';

closeModals(){
let activePortal = this.ionicApp._loadingPortal.getActive() ||
this.ionicApp._modalPortal.getActive() ||
this.ionicApp._toastPortal.getActive() ||
this.ionicApp._overlayPortal.getActive();

if (activePortal) {
  activePortal.dismiss();
}

}

It helps me to close datetimes, bottonsheet, dialogs and other modals

[Muji86]

Thanks @PabloJC
I'll try this solution.
How is closeModals() invoked?

[PabloJC]

I have created in AppComponent a function that makes me logout in the app when time expires. At that moment I call the closeModals function. For example:

this.logoutTimeout = setTimeout(() => {

  if (this.nav.getActive().component.name !== 'LoginPage') {
    this.closeModals()
    this.logout();
  }

}, 5 * 60000);

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/169