Revert "fix(menu): detach lazily-rendered content when the menu is closed (#10005)"

This reverts commit 37b1a09.

Author: tinayuangao

src/lib/menu/menu-content.ts

@@ -44,10 +44,10 @@ export class MatMenuContent implements OnDestroy {
   attach(context: any = {}) {
     if (!this._portal) {
       this._portal = new TemplatePortal(this._template, this._viewContainerRef);
+    } else if (this._portal.isAttached) {
+      this._portal.detach();
     }
 
-    this.detach();
-
     if (!this._outlet) {
       this._outlet = new DomPortalOutlet(this._document.createElement('div'),
           this._componentFactoryResolver, this._appRef, this._injector);
@@ -62,16 +62,6 @@ export class MatMenuContent implements OnDestroy {
     this._portal.attach(this._outlet, context);
   }
 
-  /**
-   * Detaches the content.
-   * @docs-private
-   */
-  detach() {
-    if (this._portal.isAttached) {
-      this._portal.detach();
-    }
-  }
-
   ngOnDestroy() {
     if (this._outlet) {
       this._outlet.dispose();

src/lib/menu/menu-directive.ts

@@ -32,7 +32,6 @@ import {
   NgZone,
 } from '@angular/core';
 import {Observable} from 'rxjs/Observable';
-import {Subject} from 'rxjs/Subject';
 import {merge} from 'rxjs/observable/merge';
 import {Subscription} from 'rxjs/Subscription';
 import {matMenuAnimations} from './menu-animations';
@@ -97,9 +96,6 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
   /** Current state of the panel animation. */
   _panelAnimationState: 'void' | 'enter-start' | 'enter' = 'void';
 
-  /** Emits whenever an animation on the menu completes. */
-  _animationDone = new Subject<void>();
-
   /** Parent menu of the current menu panel. */
   parentMenu: MatMenuPanel | undefined;
 
@@ -304,7 +300,10 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy {
   }
 
   /** Callback that is invoked when the panel animation completes. */
-  _onAnimationDone() {
-    this._animationDone.next();
+  _onAnimationDone(event: AnimationEvent) {
+    // After the initial expansion is done, trigger the second phase of the enter animation.
+    if (event.toState === 'enter-start') {
+      this._panelAnimationState = 'enter';
+    }
   }
 }

src/lib/menu/menu-trigger.ts

@@ -21,7 +21,6 @@ import {
 } from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {filter} from 'rxjs/operators/filter';
-import {take} from 'rxjs/operators/take';
 import {
   AfterContentInit,
   Directive,
@@ -239,27 +238,14 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
 
   /** Closes the menu and does the necessary cleanup. */
   private _destroyMenu() {
-    if (!this._overlayRef || !this.menuOpen) {
-      return;
-    }
-
-    const menu = this.menu;
-
-    this._resetMenu();
-    this._closeSubscription.unsubscribe();
-    this._overlayRef.detach();
-
-    if (menu instanceof MatMenu) {
-      menu._resetAnimation();
+    if (this._overlayRef && this.menuOpen) {
+      this._resetMenu();
+      this._closeSubscription.unsubscribe();
+      this._overlayRef.detach();
 
-      if (menu.lazyContent) {
-        // Wait for the exit animation to finish before detaching the content.
-        menu._animationDone
-          .pipe(take(1))
-          .subscribe(() => menu.lazyContent!.detach());
+      if (this.menu instanceof MatMenu) {
+        this.menu._resetAnimation();
       }
-    } else if (menu.lazyContent) {
-      menu.lazyContent.detach();
     }
   }
 

src/lib/menu/menu.html

@@ -5,7 +5,7 @@
     (keydown)="_handleKeydown($event)"
     (click)="closed.emit('click')"
     [@transformMenu]="_panelAnimationState"
-    (@transformMenu.done)="_onAnimationDone()"
+    (@transformMenu.done)="_onAnimationDone($event)"
     tabindex="-1"
     role="menu">
     <div class="mat-menu-content" [@fadeInItems]="'showing'">

src/lib/menu/menu.spec.ts

@@ -327,8 +327,8 @@ describe('MatMenu', () => {
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = TestBed.createComponent(SimpleLazyMenu);
-
       fixture.detectChanges();
+
       fixture.componentInstance.triggerEl.nativeElement.click();
       fixture.detectChanges();
       tick(500);
@@ -340,24 +340,6 @@ describe('MatMenu', () => {
       expect(fixture.componentInstance.trigger.menuOpen).toBe(true, 'Expected menu to be open');
     }));
 
-    it('should detach the lazy content when the menu is closed', fakeAsync(() => {
-      const fixture = TestBed.createComponent(SimpleLazyMenu);
-
-      fixture.detectChanges();
-      fixture.componentInstance.trigger.openMenu();
-      fixture.detectChanges();
-      tick(500);
-
-      expect(fixture.componentInstance.items.length).toBeGreaterThan(0);
-
-      fixture.componentInstance.trigger.closeMenu();
-      fixture.detectChanges();
-      tick(500);
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.items.length).toBe(0);
-    }));
-
     it('should focus the first menu item when opening a lazy menu via keyboard', fakeAsync(() => {
       let zone: MockNgZone;
 
@@ -390,8 +372,8 @@ describe('MatMenu', () => {
 
     it('should be able to open the same menu with a different context', fakeAsync(() => {
       const fixture = TestBed.createComponent(LazyMenuWithContext);
-
       fixture.detectChanges();
+
       fixture.componentInstance.triggerOne.openMenu();
       fixture.detectChanges();
       tick(500);
@@ -1575,7 +1557,6 @@ class FakeIcon {}
 class SimpleLazyMenu {
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
   @ViewChild('triggerEl') triggerEl: ElementRef;
-  @ViewChildren(MatMenuItem) items: QueryList<MatMenuItem>;
 }