fix(menu): update to use overlay backdrop

Author: kara

src/lib/menu/menu-directive.ts

@@ -27,7 +27,6 @@ import {UP_ARROW, DOWN_ARROW, TAB} from '../core';
   exportAs: 'mdMenu'
 })
 export class MdMenu {
-  _showClickCatcher: boolean = false;
   private _focusedItemIndex: number = 0;
 
   // config object to be passed into the menu's ngClass
@@ -61,15 +60,6 @@ export class MdMenu {
 
   @Output() close = new EventEmitter;
 
-  /**
-   * This function toggles the display of the menu's click catcher element.
-   * This element covers the viewport when the menu is open to detect clicks outside the menu.
-   * TODO: internal
-   */
-  _setClickCatcher(bool: boolean): void {
-    this._showClickCatcher = bool;
-  }
-
   /**
    * Focus the first item in the menu. This method is used by the menu trigger
    * to focus the first item when the menu is opened by the ENTER key.

src/lib/menu/menu-trigger.ts

@@ -69,6 +69,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
     if (!this._menuOpen) {
       this._createOverlay();
       this._overlayRef.attach(this._portal);
+      this._overlayRef.backdropClick().subscribe(() => this.closeMenu());
       this._initMenu();
     }
   }
@@ -119,7 +120,6 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   // set state rather than toggle to support triggers sharing a menu
   private _setIsMenuOpen(isOpen: boolean): void {
     this._menuOpen = isOpen;
-    this.menu._setClickCatcher(isOpen);
     this._menuOpen ? this.onMenuOpen.emit(null) : this.onMenuClose.emit(null);
   }
 
@@ -151,6 +151,8 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   private _getOverlayConfig(): OverlayState {
     const overlayState = new OverlayState();
     overlayState.positionStrategy = this._getPosition();
+    overlayState.hasBackdrop = true;
+    overlayState.backdropClass = 'md-overlay-transparent-backdrop';
     return overlayState;
   }
 

src/lib/menu/menu.html

@@ -2,5 +2,4 @@
   <div class="md-menu" [ngClass]="_classList" (click)="_emitCloseEvent()" (keydown)="_handleKeydown($event)">
     <ng-content></ng-content>
   </div>
-</template>
-<div class="md-menu-click-catcher" *ngIf="_showClickCatcher" (click)="_emitCloseEvent()"></div>
+</template>

src/lib/menu/menu.scss

@@ -52,8 +52,4 @@ $md-menu-vertical-padding: 8px !default;
 
 button[md-menu-item] {
   width: 100%;
-}
-
-.md-menu-click-catcher {
-  @include md-fullscreen();
-}
+}