diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 914e15578f37..502f490c02fe 100644 --- a/src/lib/menu/menu-directive.ts +++ b/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; diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts index dd3728cd2e7b..3b3481b63c2f 100644 --- a/src/lib/menu/menu-panel.ts +++ b/src/lib/menu/menu-panel.ts @@ -9,4 +9,5 @@ export interface MdMenuPanel { close: EventEmitter; focusFirstItem: () => 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 f98a025ef8ba..0276fbc13ff4 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/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(); }); } diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index a5fc6ee4f98c..3199b475a2e7 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -384,6 +384,34 @@ describe('MdMenu', () => { }); + describe('close event', () => { + let fixture: ComponentFixture; + + 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 = 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: ` - + @@ -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(); focusFirstItem = () => {}; setPositionClasses = () => {}; + _emitCloseEvent() { + this.close.emit(); + } } @Component({