fix(menu): not emitting close event when closing via the backdrop (#3300)

* 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.

* fix: restore method prefix

Author: crisbeto

src/lib/menu/menu-directive.ts

@@ -116,14 +116,14 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   }
 
   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;

src/lib/menu/menu-panel.ts

@@ -9,4 +9,5 @@ export interface MdMenuPanel {
   close: EventEmitter<void>;
   focusFirstItem: () => void;
   setPositionClasses: (x: MenuPositionX, y: MenuPositionY) => void;
+  _emitCloseEvent: () => void;
 }

src/lib/menu/menu-trigger.ts

@@ -34,7 +34,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
  * responsible for toggling the display of the provided menu instance.
  */
 @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',
@@ -144,7 +144,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
    */
   private _subscribeToBackdrop(): void {
     this._backdropSubscription = this._overlayRef.backdropClick().subscribe(() => {
-      this.closeMenu();
+      this.menu._emitCloseEvent();
     });
   }
 

src/lib/menu/menu.spec.ts

@@ -384,6 +384,34 @@ 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();
+    });
+  });
+
   describe('destroy', () => {
     it('does not throw an error on destroy', () => {
       const fixture = TestBed.createComponent(SimpleMenu);
@@ -395,7 +423,7 @@ describe('MdMenu', () => {
 @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>
@@ -404,6 +432,7 @@ describe('MdMenu', () => {
 class SimpleMenu {
   @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
   @ViewChild('triggerEl') triggerEl: ElementRef;
+  closeCallback = jasmine.createSpy('menu closed callback');
 }
 
 @Component({
@@ -456,6 +485,9 @@ class CustomMenuPanel implements MdMenuPanel {
   @Output() close = new EventEmitter<void>();
   focusFirstItem = () => {};
   setPositionClasses = () => {};
+  _emitCloseEvent() {
+    this.close.emit();
+  }
 }
 
 @Component({