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.

Author: crisbeto

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

src/lib/menu/menu-panel.ts

@@ -30,4 +30,5 @@ export interface MatMenuPanel {
   setElevation?(depth: number): void;
   lazyContent?: MatMenuContent;
   backdropClass?: string;
+  hasBackdrop?: boolean;
 }

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()

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();