fix(menu): lazy-rendered content being duplicated when toggling quickly (#11348)

Fixes the lazily-rendered content of a menu being duplicated, if it user toggles the panel too quickly. The issue comes from the fact that we wait for the animation to finish before we detach the content, however we allow the panel to be reopened as soon the closing sequence is kicked off.

Fixes #11331.

Author: crisbeto

src/lib/menu/menu-directive.ts

@@ -37,6 +37,7 @@ import {throwMatMenuInvalidPositionX, throwMatMenuInvalidPositionY} from './menu
 import {MatMenuItem} from './menu-item';
 import {MAT_MENU_PANEL, MatMenuPanel} from './menu-panel';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
+import {AnimationEvent} from '@angular/animations';
 
 
 /** Default `mat-menu` options that can be overridden. */

src/lib/menu/menu-trigger.ts

@@ -235,7 +235,6 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
 
     const menu = this.menu;
 
-    this._resetMenu();
     this._closeSubscription.unsubscribe();
     this._overlayRef.detach();
 
@@ -245,11 +244,20 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
       if (menu.lazyContent) {
         // Wait for the exit animation to finish before detaching the content.
         menu._animationDone
-          .pipe(take(1))
-          .subscribe(() => menu.lazyContent!.detach());
+          .pipe(filter(event => event.toState === 'void'), take(1))
+          .subscribe(() => {
+            menu.lazyContent!.detach();
+            this._resetMenu();
+          });
+      } else {
+        this._resetMenu();
+      }
+    } else {
+      this._resetMenu();
+
+      if (menu.lazyContent) {
+        menu.lazyContent.detach();
       }
-    } else if (menu.lazyContent) {
-      menu.lazyContent.detach();
     }
   }
 

src/lib/menu/menu.spec.ts

@@ -418,6 +418,31 @@ describe('MatMenu', () => {
       expect(fixture.componentInstance.items.length).toBe(0);
     }));
 
+    it('should wait for the close animation to finish before considering the panel as closed',
+      fakeAsync(() => {
+        const fixture = createComponent(SimpleLazyMenu);
+        fixture.detectChanges();
+        const trigger = fixture.componentInstance.trigger;
+
+        expect(trigger.menuOpen).toBe(false, 'Expected menu to start off closed');
+
+        trigger.openMenu();
+        fixture.detectChanges();
+        tick(500);
+
+        expect(trigger.menuOpen).toBe(true, 'Expected menu to be open');
+
+        trigger.closeMenu();
+        fixture.detectChanges();
+
+        expect(trigger.menuOpen)
+            .toBe(true, 'Expected menu to be considered open while the close animation is running');
+        tick(500);
+        fixture.detectChanges();
+
+        expect(trigger.menuOpen).toBe(false, 'Expected menu to be closed');
+      }));
+
     it('should focus the first menu item when opening a lazy menu via keyboard', fakeAsync(() => {
       let zone: MockNgZone;
       let fixture = createComponent(SimpleLazyMenu, [{