From 268b0e8f130c7630dacf73384b68c268da73e138 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 19 Dec 2018 16:14:52 +0100
Subject: [PATCH] fix(menu): hasBackdrop not being updated after first open
 (#14561)

Fixes changing the `hasBackdrop` value not having an effect if it happens after the first time a menu is opened.

Fixes #14560.
---
 src/lib/menu/menu-trigger.ts |  7 +++++--
 src/lib/menu/menu.spec.ts    | 27 +++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index db04041363a..41d6c22d7b4 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -226,7 +226,11 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     this._checkMenu();
 
     const overlayRef = this._createOverlay();
-    this._setPosition(overlayRef.getConfig().positionStrategy as FlexibleConnectedPositionStrategy);
+    const overlayConfig = overlayRef.getConfig();
+
+    this._setPosition(overlayConfig.positionStrategy as FlexibleConnectedPositionStrategy);
+    overlayConfig.hasBackdrop = this.menu.hasBackdrop == null ? !this.triggersSubmenu() :
+        this.menu.hasBackdrop;
     overlayRef.attach(this._getPortal());
 
     if (this.menu.lazyContent) {
@@ -394,7 +398,6 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
           .flexibleConnectedTo(this._element)
           .withLockedPosition()
           .withTransformOriginOn('.mat-menu-panel'),
-      hasBackdrop: this.menu.hasBackdrop == null ? !this.triggersSubmenu() : this.menu.hasBackdrop,
       backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop',
       scrollStrategy: this._scrollStrategy(),
       direction: this._dir
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index 81415a13364..3e0b5953576 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -114,6 +114,33 @@ describe('MatMenu', () => {
     expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeFalsy();
   }));
 
+  it('should be able to remove the backdrop on repeat openings', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    // Start off with a backdrop.
+    expect(overlayContainerElement.querySelector('.cdk-overlay-backdrop')).toBeTruthy();
+
+    fixture.componentInstance.trigger.closeMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    // Change `hasBackdrop` after the first open.
+    fixture.componentInstance.menu.hasBackdrop = false;
+    fixture.detectChanges();
+
+    // Reopen the menu.
+    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 = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();