diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 0276fbc13ff4..928c48adbfed 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -39,7 +39,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions'; host: { 'aria-haspopup': 'true', '(mousedown)': '_handleMousedown($event)', - '(click)': 'toggleMenu()', + '(click)': 'toggleMenu($event)', }, exportAs: 'mdMenuTrigger' }) @@ -54,6 +54,9 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { // the first item of the list when the menu is opened via the keyboard private _openedByMouse: boolean = false; + /** Wether the preventClose for menu instance is asked or not.*/ + @Input() preventClose: boolean = false; + /** @deprecated */ @Input('md-menu-trigger-for') get _deprecatedMdMenuTriggerFor(): MdMenuPanel { return this.menu; } @@ -93,8 +96,25 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { get menuOpen(): boolean { return this._menuOpen; } /** Toggles the menu between the open and closed states. */ - toggleMenu(): void { - return this._menuOpen ? this.closeMenu() : this.openMenu(); + toggleMenu(event): void { + /** whent it's a void function why there is a return statement? */ + /** Removed `return` */ + + /** Checks if preventClose is defined and has true value or not. */ + if (this.preventClose) { + /** + * `this._element.nativeElement.contains(event.target)`. + * Checks if the target, where click was fired, falls inside menu panel or not. + */ + if (this._menuOpen && !this._element.nativeElement.contains(event.target)) { + this.closeMenu(); + } else { + this.openMenu(); + } + } else { + /** If no `preventClose` is defined, it will go same old way. */ + this._menuOpen ? this.closeMenu() : this.openMenu(); + } } /** Opens the menu. */