From 4d8b8fad329af092f67e6142471629172302ee8d Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 25 Feb 2017 20:56:29 +0100
Subject: [PATCH 1/2] fix(menu): not emitting close event when closing via the
 backdrop

* Fixes the menu not emitting the `close` event if it is closed by clicking on the backdrop.
* Adds missing test coverage for the `close` event in general.

Fixes #3295.
---
 src/lib/menu/menu-directive.ts |  8 ++++----
 src/lib/menu/menu-panel.ts     |  1 +
 src/lib/menu/menu-trigger.ts   |  4 ++--
 src/lib/menu/menu.html         |  2 +-
 src/lib/menu/menu.spec.ts      | 34 +++++++++++++++++++++++++++++++++-
 5 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index bdfcc1507b34..3ce4985bac9d 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/src/lib/menu/menu-directive.ts
@@ -64,7 +64,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   ngAfterContentInit() {
     this._keyManager = new FocusKeyManager(this.items).withWrap();
     this._tabSubscription = this._keyManager.tabOut.subscribe(() => {
-      this._emitCloseEvent();
+      this.emitCloseEvent();
     });
   }
 
@@ -102,19 +102,19 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
    * This emits a close event to which the trigger is subscribed. When emitted, the
    * trigger will close the menu.
    */
-  _emitCloseEvent(): void {
+  emitCloseEvent(): void {
     this.close.emit();
   }
 
   private _setPositionX(pos: MenuPositionX): void {
-    if ( pos !== 'before' && pos !== 'after') {
+    if (pos !== 'before' && pos !== 'after') {
       throw new MdMenuInvalidPositionX();
     }
     this.positionX = pos;
   }
 
   private _setPositionY(pos: MenuPositionY): void {
-    if ( pos !== 'above' && pos !== 'below') {
+    if (pos !== 'above' && pos !== 'below') {
       throw new MdMenuInvalidPositionY();
     }
     this.positionY = pos;
diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts
index dd3728cd2e7b..1835782e5fc0 100644
--- a/src/lib/menu/menu-panel.ts
+++ b/src/lib/menu/menu-panel.ts
@@ -8,5 +8,6 @@ export interface MdMenuPanel {
   templateRef: TemplateRef<any>;
   close: EventEmitter<void>;
   focusFirstItem: () => void;
+  emitCloseEvent: () => void;
   setPositionClasses: (x: MenuPositionX, y: MenuPositionY) => void;
 }
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index aac7d0bd034f..acf08725fe7d 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -33,7 +33,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
  * TODO(andrewseguin): Remove the kebab versions in favor of camelCased attribute selectors
  */
 @Directive({
-  selector: `[md-menu-trigger-for], [mat-menu-trigger-for], 
+  selector: `[md-menu-trigger-for], [mat-menu-trigger-for],
              [mdMenuTriggerFor], [matMenuTriggerFor]`,
   host: {
     'aria-haspopup': 'true',
@@ -143,7 +143,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
    */
   private _subscribeToBackdrop(): void {
     this._backdropSubscription = this._overlayRef.backdropClick().subscribe(() => {
-      this.closeMenu();
+      this.menu.emitCloseEvent();
     });
   }
 
diff --git a/src/lib/menu/menu.html b/src/lib/menu/menu.html
index 3360ab135e2e..582c8876a889 100644
--- a/src/lib/menu/menu.html
+++ b/src/lib/menu/menu.html
@@ -1,6 +1,6 @@
 <template>
   <div class="mat-menu-panel" [ngClass]="_classList" (keydown)="_keyManager.onKeydown($event)"
-    (click)="_emitCloseEvent()" [@transformMenu]="'showing'">
+    (click)="emitCloseEvent()" [@transformMenu]="'showing'">
     <div class="mat-menu-content" [@fadeInItems]="'showing'">
       <ng-content></ng-content>
     </div>
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index fbf23d4bed85..7eeb32423200 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -384,12 +384,40 @@ describe('MdMenu', () => {
 
   });
 
+  describe('close event', () => {
+    let fixture: ComponentFixture<SimpleMenu>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleMenu);
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openMenu();
+    });
+
+    it('should emit an event when a menu item is clicked', () => {
+      const menuItem = overlayContainerElement.querySelector('[md-menu-item]') as HTMLElement;
+
+      menuItem.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.closeCallback).toHaveBeenCalled();
+    });
+
+    it('should emit a close event when the backdrop is clicked', () => {
+      const backdrop = <HTMLElement>overlayContainerElement.querySelector('.cdk-overlay-backdrop');
+
+      backdrop.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.closeCallback).toHaveBeenCalled();
+    });
+  });
+
 });
 
 @Component({
   template: `
     <button [mdMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
-    <md-menu #menu="mdMenu">
+    <md-menu #menu="mdMenu" (close)="closeCallback()">
       <button md-menu-item> Item </button>
       <button md-menu-item disabled> Disabled </button>
     </md-menu>
@@ -398,6 +426,7 @@ describe('MdMenu', () => {
 class SimpleMenu {
   @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
   @ViewChild('triggerEl') triggerEl: ElementRef;
+  closeCallback = jasmine.createSpy('menu closed callback');
 }
 
 @Component({
@@ -450,6 +479,9 @@ class CustomMenuPanel implements MdMenuPanel {
   @Output() close = new EventEmitter<void>();
   focusFirstItem = () => {};
   setPositionClasses = () => {};
+  emitCloseEvent() {
+    this.close.emit();
+  }
 }
 
 @Component({

From 90adc9493b9aaa318a062ad585cdb4c44969e1fa Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 4 Mar 2017 09:18:24 +0100
Subject: [PATCH 2/2] fix: restore method prefix

---
 src/lib/menu/menu-directive.ts | 4 ++--
 src/lib/menu/menu-panel.ts     | 2 +-
 src/lib/menu/menu-trigger.ts   | 2 +-
 src/lib/menu/menu.html         | 2 +-
 src/lib/menu/menu.spec.ts      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index 3ce4985bac9d..a13297c6bcc9 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/src/lib/menu/menu-directive.ts
@@ -64,7 +64,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   ngAfterContentInit() {
     this._keyManager = new FocusKeyManager(this.items).withWrap();
     this._tabSubscription = this._keyManager.tabOut.subscribe(() => {
-      this.emitCloseEvent();
+      this._emitCloseEvent();
     });
   }
 
@@ -102,7 +102,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
    * This emits a close event to which the trigger is subscribed. When emitted, the
    * trigger will close the menu.
    */
-  emitCloseEvent(): void {
+  _emitCloseEvent(): void {
     this.close.emit();
   }
 
diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts
index 1835782e5fc0..3b3481b63c2f 100644
--- a/src/lib/menu/menu-panel.ts
+++ b/src/lib/menu/menu-panel.ts
@@ -8,6 +8,6 @@ export interface MdMenuPanel {
   templateRef: TemplateRef<any>;
   close: EventEmitter<void>;
   focusFirstItem: () => void;
-  emitCloseEvent: () => void;
   setPositionClasses: (x: MenuPositionX, y: MenuPositionY) => void;
+  _emitCloseEvent: () => void;
 }
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index acf08725fe7d..5379906fa18d 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -143,7 +143,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
    */
   private _subscribeToBackdrop(): void {
     this._backdropSubscription = this._overlayRef.backdropClick().subscribe(() => {
-      this.menu.emitCloseEvent();
+      this.menu._emitCloseEvent();
     });
   }
 
diff --git a/src/lib/menu/menu.html b/src/lib/menu/menu.html
index 582c8876a889..3360ab135e2e 100644
--- a/src/lib/menu/menu.html
+++ b/src/lib/menu/menu.html
@@ -1,6 +1,6 @@
 <template>
   <div class="mat-menu-panel" [ngClass]="_classList" (keydown)="_keyManager.onKeydown($event)"
-    (click)="emitCloseEvent()" [@transformMenu]="'showing'">
+    (click)="_emitCloseEvent()" [@transformMenu]="'showing'">
     <div class="mat-menu-content" [@fadeInItems]="'showing'">
       <ng-content></ng-content>
     </div>
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index 7eeb32423200..346fcd13cbbd 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -479,7 +479,7 @@ class CustomMenuPanel implements MdMenuPanel {
   @Output() close = new EventEmitter<void>();
   focusFirstItem = () => {};
   setPositionClasses = () => {};
-  emitCloseEvent() {
+  _emitCloseEvent() {
     this.close.emit();
   }
 }