From 288eeb54ee22582d98bc1ed28e4e8c507bcc1361 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Wed, 8 Aug 2018 18:15:07 +0200
Subject: [PATCH] fix(menu): dismiss when clicking outside

fixes #15096
---
 core/src/components/menu/menu.scss               |  3 ---
 core/src/components/menu/menu.tsx                | 16 ++++++++++------
 .../components/split-pane/split-pane.ios.scss    |  2 +-
 .../src/components/split-pane/split-pane.md.scss |  2 +-
 core/src/components/split-pane/split-pane.scss   |  2 +-
 .../components/split-pane/test/basic/index.html  |  2 +-
 6 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss
index f5aa07aaa7e..3beef6959cf 100644
--- 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
index 230580f43a0..68c4c23ce50 100644
--- 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
index d338fcdbee4..6d5d2736111 100644
--- 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
index fed364db08b..49121cf37bb 100644
--- 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
index c639a7a5100..fbaf9a977d7 100644
--- 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
index 8e6f2b173d9..449262ed95c 100644
--- 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">