fix(menu): hardware back button now dismisses side menu if open (#20558)

fixes #20559
ionic-team · Feb 24, 2020 · 6b2a929 · 6b2a929
1 parent 8d3ce8d
commit 6b2a929
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/core/src/utils/hardware-back-button.ts b/core/src/utils/hardware-back-button.ts
@@ -55,3 +55,6 @@ const executeAction = async (handler: Handler | undefined) => {
     console.error(e);
   }
 };
+
+export const OVERLAY_BACK_BUTTON_PRIORITY = 100;
+export const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
diff --git a/core/src/utils/menu-controller/index.ts b/core/src/utils/menu-controller/index.ts
@@ -1,4 +1,5 @@
-import { AnimationBuilder, MenuI } from '../../interface';
+import { AnimationBuilder, BackButtonEvent, MenuI } from '../../interface';
+import { MENU_BACK_BUTTON_PRIORITY } from '../hardware-back-button';
 
 import { menuOverlayAnimation } from './animations/overlay';
 import { menuPushAnimation } from './animations/push';
@@ -206,6 +207,16 @@ const createMenuController = () => {
   registerAnimation('push', menuPushAnimation);
   registerAnimation('overlay', menuOverlayAnimation);
 
+  const doc: Document = document;
+  doc.addEventListener('ionBackButton', (ev: any) => {
+    const openMenu = _getOpenSync();
+    if (openMenu) {
+      (ev as BackButtonEvent).detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
+        return openMenu.close();
+      });
+    }
+  });
+
   return {
     registerAnimation,
     get,

diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
@@ -1,6 +1,8 @@
 import { config } from '../global/config';
 import { ActionSheetOptions, AlertOptions, Animation, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
 
+import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
+
 let lastId = 0;
 
 export const activeAnimations = new WeakMap<OverlayInterface, Animation[]>();
@@ -72,7 +74,7 @@ export const connectListeners = (doc: Document) => {
     doc.addEventListener('ionBackButton', ev => {
       const lastOverlay = getOverlay(doc);
       if (lastOverlay && lastOverlay.backdropDismiss) {
-        (ev as BackButtonEvent).detail.register(100, () => {
+        (ev as BackButtonEvent).detail.register(OVERLAY_BACK_BUTTON_PRIORITY, () => {
           return lastOverlay.dismiss(undefined, BACKDROP);
         });
       }