fix(menu): dismiss when clicking outside

fixes #15096
ionic-team · Aug 8, 2018 · 288eeb5 · 288eeb5
1 parent dd114ff
commit 288eeb5
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 13 deletions.
diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss
@@ -66,15 +66,12 @@ ion-backdrop {
 .menu-content-open {
   cursor: pointer;
   touch-action: manipulation;
-}
 
-.menu-content-open {
   // the containing element itself should be clickable but
   // everything inside of it should not clickable when menu is open
   pointer-events: none;
 }
 
-
 @media (max-width: 340px) {
 
   .menu-inner {

diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
@@ -214,11 +214,16 @@ export class Menu {
 
   @Listen('body:click', { enabled: false, capture: true })
   onBackdropClick(ev: any) {
-    const path = ev.path;
-    if (path && !path.includes(this.menuInnerEl) && this.lastOnEnd < ev.timeStamp - 100) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      this.close();
+    if (this.lastOnEnd < ev.timeStamp - 100) {
+      const shouldClose = (ev.composedPath)
+        ? !ev.composedPath().includes(this.menuInnerEl)
+        : false;
+
+      if (shouldClose) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.close();
+      }
     }
   }
 
@@ -481,7 +486,6 @@ export class Menu {
       <div
         class="menu-inner"
         ref={el => this.menuInnerEl = el}
-        onClick={this.onBackdropClick.bind(this)}
       >
         <slot></slot>
       </div>,

diff --git a/core/src/components/split-pane/split-pane.ios.scss b/core/src/components/split-pane/split-pane.ios.scss
@@ -5,7 +5,7 @@
 // Split Pane
 // --------------------------------------------------
 
-.split-pane-ios.split-pane-visible > .split-pane-side[side=start] {
+.split-pane-ios.split-pane-visible > .split-pane-side {
   min-width: $split-pane-ios-side-min-width;
   max-width: $split-pane-ios-side-max-width;
 

diff --git a/core/src/components/split-pane/split-pane.md.scss b/core/src/components/split-pane/split-pane.md.scss
@@ -4,7 +4,7 @@
 // Split Pane
 // --------------------------------------------------
 
-.split-pane-md.split-pane-visible > .split-pane-side[side=start] {
+.split-pane-md.split-pane-visible > .split-pane-side {
   min-width: $split-pane-md-side-min-width;
   max-width: $split-pane-md-side-max-width;
 

diff --git a/core/src/components/split-pane/split-pane.scss b/core/src/components/split-pane/split-pane.scss
@@ -39,7 +39,7 @@
   display: none;
 }
 
-.split-pane-visible > .split-pane-side[side=start] {
+.split-pane-visible > .split-pane-side {
   order: -1;
 }
 

diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html
@@ -13,7 +13,7 @@
   <ion-app>
     <ion-split-pane id="splitPane">
 
-      <ion-menu side="end">
+      <ion-menu side="start">
 
         <ion-header>
           <ion-toolbar color="secondary">