From 9bbe485ed0d859c8cc0a9b7d3c658ef3a19e43dc Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Fri, 30 Sep 2016 14:36:30 +0200
Subject: [PATCH] fix(menu): backdrop click without 300ms delay

fixes #6405
---
 src/components/menu/menu.ts | 36 ++++++++++++++++--------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index ace778c3122..5ae09c7ad6f 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -9,6 +9,7 @@ import { MenuController } from './menu-controller';
 import { MenuType } from './menu-types';
 import { Platform } from '../../platform/platform';
 import { GestureController } from '../../gestures/gesture-controller';
+import { UIEventManager } from '../../util/ui-event-manager';
 
 
 /**
@@ -178,7 +179,7 @@ import { GestureController } from '../../gestures/gesture-controller';
   selector: 'ion-menu',
   template:
     '<div class="menu-inner"><ng-content></ng-content></div>' +
-    '<ion-backdrop (click)="bdClick($event)" disableScroll="false"></ion-backdrop>',
+    '<ion-backdrop disableScroll="false"></ion-backdrop>',
   host: {
     'role': 'navigation'
   },
@@ -195,7 +196,7 @@ export class Menu {
   private _isAnimating: boolean = false;
   private _isPers: boolean = false;
   private _init: boolean = false;
-
+  private _events: UIEventManager = new UIEventManager();
 
   /**
    * @private
@@ -207,11 +208,6 @@ export class Menu {
    */
   @ViewChild(Backdrop) backdrop: Backdrop;
 
-  /**
-   * @private
-   */
-  onContentClick: EventListener;
-
   /**
    * @input {any} A reference to the content element the menu should use.
    */
@@ -349,15 +345,6 @@ export class Menu {
     }
     self._setListeners();
 
-    // create a reusable click handler on this instance, but don't assign yet
-    self.onContentClick = function(ev: UIEvent) {
-      if (self._isEnabled) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        self.close();
-      }
-    };
-
     self._cntEle.classList.add('menu-content');
     self._cntEle.classList.add('menu-content-' + self.type);
 
@@ -368,11 +355,11 @@ export class Menu {
   /**
    * @private
    */
-  bdClick(ev: Event) {
-    console.debug('backdrop clicked');
+  onBackdropClick(ev: UIEvent): boolean {
     ev.preventDefault();
     ev.stopPropagation();
     this._menuCtrl.close();
+    return false;
   }
 
   /**
@@ -502,10 +489,18 @@ export class Menu {
 
     (<any>this._cntEle.classList)[isOpen ? 'add' : 'remove']('menu-content-open');
 
-    this._cntEle.removeEventListener('click', this.onContentClick);
+    this._events.unlistenAll();
 
     if (isOpen) {
-      this._cntEle.addEventListener('click', this.onContentClick);
+      let callback = this.onBackdropClick.bind(this);
+      this._events.pointerEvents({
+        element: this._cntEle,
+        pointerDown: callback
+      });
+      this._events.pointerEvents({
+        element: this.backdrop.getNativeElement(),
+        pointerDown: callback
+      });
       this.ionOpen.emit(true);
 
     } else {
@@ -612,6 +607,7 @@ export class Menu {
    */
   ngOnDestroy() {
     this._menuCtrl.unregister(this);
+    this._events.unlistenAll();
     this._cntGesture && this._cntGesture.destroy();
     this._type && this._type.destroy();
     this._resizeUnreg && this._resizeUnreg();