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

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

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 10
  • Comments: 18 (5 by maintainers)

Most upvoted comments

Hi,

So is this going to be fixed?

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

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