Skip to content

Commit 9612381

Browse files
committed
fix(menu): update to use overlay backdrop
1 parent cfe3e98 commit 9612381

File tree

4 files changed

+5
-17
lines changed

4 files changed

+5
-17
lines changed

src/lib/menu/menu-directive.ts

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import {UP_ARROW, DOWN_ARROW, TAB} from '../core';
2727
exportAs: 'mdMenu'
2828
})
2929
export class MdMenu {
30-
_showClickCatcher: boolean = false;
3130
private _focusedItemIndex: number = 0;
3231

3332
// config object to be passed into the menu's ngClass
@@ -61,15 +60,6 @@ export class MdMenu {
6160

6261
@Output() close = new EventEmitter;
6362

64-
/**
65-
* This function toggles the display of the menu's click catcher element.
66-
* This element covers the viewport when the menu is open to detect clicks outside the menu.
67-
* TODO: internal
68-
*/
69-
_setClickCatcher(bool: boolean): void {
70-
this._showClickCatcher = bool;
71-
}
72-
7363
/**
7464
* Focus the first item in the menu. This method is used by the menu trigger
7565
* to focus the first item when the menu is opened by the ENTER key.

src/lib/menu/menu-trigger.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
7070
if (!this._menuOpen) {
7171
this._createOverlay();
7272
this._overlayRef.attach(this._portal);
73+
this._overlayRef.backdropClick().subscribe(() => this.closeMenu());
7374
this._initMenu();
7475
}
7576
}
@@ -120,7 +121,6 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
120121
// set state rather than toggle to support triggers sharing a menu
121122
private _setIsMenuOpen(isOpen: boolean): void {
122123
this._menuOpen = isOpen;
123-
this.menu._setClickCatcher(isOpen);
124124
this._menuOpen ? this.onMenuOpen.emit(null) : this.onMenuClose.emit(null);
125125
}
126126

@@ -152,6 +152,8 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
152152
private _getOverlayConfig(): OverlayState {
153153
const overlayState = new OverlayState();
154154
overlayState.positionStrategy = this._getPosition();
155+
overlayState.hasBackdrop = true;
156+
overlayState.backdropClass = 'md-overlay-transparent-backdrop';
155157
return overlayState;
156158
}
157159

src/lib/menu/menu.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
<ng-content></ng-content>
55
</div>
66
</template>
7-
<div class="md-menu-click-catcher" *ngIf="_showClickCatcher" (click)="_emitCloseEvent()"></div>
7+

src/lib/menu/menu.scss

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,4 @@ $md-menu-vertical-padding: 8px !default;
5252

5353
button[md-menu-item] {
5454
width: 100%;
55-
}
56-
57-
.md-menu-click-catcher {
58-
@include md-fullscreen();
59-
}
55+
}

0 commit comments

Comments
 (0)