From e42f0bcead7cf05610195cc7ababddfe3952bdda Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 1 Mar 2018 00:31:00 +0100
Subject: [PATCH] feat(menu): allow for backdrop to be disabled (#10070)

Adds the `hasBackdrop` input on the `MatMenu` directive, allowing consumers to remove the backdrop.

Fixes #9938.
---
 src/lib/menu/menu-directive.ts | 11 +++++++++++
 src/lib/menu/menu-panel.ts     |  1 +
 src/lib/menu/menu-trigger.ts   |  2 +-
 src/lib/menu/menu.spec.ts      | 12 ++++++++++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
index 0f348a02e06..5078d544696 100644
--- a/src/lib/menu/menu-directive.ts
+++ b/src/lib/menu/menu-directive.ts
@@ -58,6 +58,9 @@ export interface MatMenuDefaultOptions {
 
   /** Class to be applied to the menu's backdrop. */
   backdropClass: string;
+
+  /** Whether the menu has a backdrop. */
+  hasBackdrop: boolean;
 }
 
 /** Injection token to be used to override the default options for `mat-menu`. */
@@ -151,6 +154,14 @@ export class MatMenu implements OnInit, AfterContentInit, MatMenuPanel, OnDestro
   }
   private _overlapTrigger: boolean = this._defaultOptions.overlapTrigger;
 
+  /** Whether the menu has a backdrop. */
+  @Input()
+  get hasBackdrop(): boolean { return this._hasBackdrop; }
+  set hasBackdrop(value: boolean) {
+    this._hasBackdrop = coerceBooleanProperty(value);
+  }
+  private _hasBackdrop: boolean = this._defaultOptions.hasBackdrop;
+
   /**
    * This method takes classes set on the host mat-menu element and applies them on the
    * menu template that displays in the overlay container.  Otherwise, it's difficult
diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts
index ea67b3e569e..9e140a1d819 100644
--- a/src/lib/menu/menu-panel.ts
+++ b/src/lib/menu/menu-panel.ts
@@ -30,4 +30,5 @@ export interface MatMenuPanel {
   setElevation?(depth: number): void;
   lazyContent?: MatMenuContent;
   backdropClass?: string;
+  hasBackdrop?: boolean;
 }
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index 69744b0cbb5..f079f2497b0 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -339,7 +339,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   private _getOverlayConfig(): OverlayConfig {
     return new OverlayConfig({
       positionStrategy: this._getPosition(),
-      hasBackdrop: !this.triggersSubmenu(),
+      hasBackdrop: this.menu.hasBackdrop == null ? !this.triggersSubmenu() : this.menu.hasBackdrop,
       backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
       direction: this.dir,
       scrollStrategy: this._scrollStrategy()
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index 78b74cf11b3..b1e8f3d22fa 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -111,6 +111,18 @@ describe('MatMenu', () => {
     expect(overlayContainerElement.textContent).toBe('');
   }));
 
+  it('should be able to remove the backdrop', fakeAsync(() => {
+    const fixture = TestBed.createComponent(SimpleMenu);
+    fixture.detectChanges();
+
+    fixture.componentInstance.menu.hasBackdrop = false;
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeFalsy();
+  }));
+
   it('should restore focus to the trigger when the menu was opened by keyboard', fakeAsync(() => {
     const fixture = TestBed.createComponent(SimpleMenu);
     fixture.detectChanges();