fix(menu): not closed correctly if opened by different trigger while visible

Fixes the `MatMenu` overlay not being detached if the menu is opened by a different trigger while the panel is still open.

Fixes #15354.

Author: crisbeto

src/material/menu/menu-panel.ts

@@ -33,6 +33,7 @@ export interface MatMenuPanel<T = any> {
   focusFirstItem: (origin?: FocusOrigin) => void;
   resetActiveItem: () => void;
   setPositionClasses?: (x: MenuPositionX, y: MenuPositionY) => void;
+  openedBy?: EventEmitter<any>;
   setElevation?(depth: number): void;
   lazyContent?: MatMenuContent;
   backdropClass?: string;

src/material/menu/menu-trigger.ts

@@ -34,7 +34,7 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
-import {asapScheduler, merge, of as observableOf, Subscription} from 'rxjs';
+import {asapScheduler, merge, of as observableOf, Subscription, Subject} from 'rxjs';
 import {delay, filter, take, takeUntil} from 'rxjs/operators';
 import {MatMenu} from './menu';
 import {throwMatMenuMissingError} from './menu-errors';
@@ -87,7 +87,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
   private _menuOpen: boolean = false;
   private _closingActionsSubscription = Subscription.EMPTY;
   private _hoverSubscription = Subscription.EMPTY;
-  private _menuCloseSubscription = Subscription.EMPTY;
+  private _menuChanged = new Subject<void>();
   private _scrollStrategy: () => ScrollStrategy;
 
   /**
@@ -119,10 +119,18 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     }
 
     this._menu = menu;
-    this._menuCloseSubscription.unsubscribe();
+    this._menuChanged.next();
 
     if (menu) {
-      this._menuCloseSubscription = menu.close.asObservable().subscribe(reason => {
+      if (menu.openedBy) {
+        menu.openedBy.pipe(takeUntil(this._menuChanged)).subscribe((reason?: MatMenuTrigger) => {
+          if (reason && reason !== this) {
+            this._destroyMenu();
+          }
+        });
+      }
+
+      menu.close.pipe(takeUntil(this._menuChanged)).subscribe(reason => {
         this._destroyMenu();
 
         // If a click closed the menu, we should close the entire chain of nested menus.
@@ -201,9 +209,9 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     this._element.nativeElement.removeEventListener('touchstart', this._handleTouchStart,
         passiveEventListenerOptions);
 
-    this._menuCloseSubscription.unsubscribe();
     this._closingActionsSubscription.unsubscribe();
     this._hoverSubscription.unsubscribe();
+    this._menuChanged.complete();
   }
 
   /** Whether the menu is open. */
@@ -315,11 +323,16 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
    * the menu was opened via the keyboard.
    */
   private _initMenu(): void {
-    this.menu.parentMenu = this.triggersSubmenu() ? this._parentMenu : undefined;
-    this.menu.direction = this.dir;
+    const menu = this.menu;
+    menu.parentMenu = this.triggersSubmenu() ? this._parentMenu : undefined;
+    menu.direction = this.dir;
     this._setMenuElevation();
     this._setIsMenuOpen(true);
-    this.menu.focusFirstItem(this._openedBy || 'program');
+    menu.focusFirstItem(this._openedBy || 'program');
+
+    if (menu.openedBy) {
+      menu.openedBy.emit(this);
+    }
   }
 
   /** Updates the menu elevation based on the amount of parent menus that it has. */

src/material/menu/menu.spec.ts

@@ -743,6 +743,21 @@ describe('MatMenu', () => {
     flush();
   }));
 
+  it('should close the menu if it is opened by a different trigger', fakeAsync(() => {
+    const fixture = createComponent(MenuWithMultipleTriggers);
+    fixture.detectChanges();
+
+    fixture.componentInstance.triggers.first.openMenu();
+    fixture.detectChanges();
+    flush();
+    expect(overlayContainerElement.querySelectorAll('.mat-menu-panel').length).toBe(1);
+
+    fixture.componentInstance.triggers.last.openMenu();
+    fixture.detectChanges();
+    flush();
+    expect(overlayContainerElement.querySelectorAll('.mat-menu-panel').length).toBe(1);
+  }));
+
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = createComponent(SimpleLazyMenu);
@@ -2313,3 +2328,18 @@ class DynamicPanelMenu {
 class MenuWithCheckboxItems {
   @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
 }
+
+
+@Component({
+  template: `
+    <button [matMenuTriggerFor]="menu">First trigger</button>
+    <button [matMenuTriggerFor]="menu">Second trigger</button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item>Item one</button>
+      <button mat-menu-item>Item two</button>
+    </mat-menu>
+  `
+})
+class MenuWithMultipleTriggers {
+  @ViewChildren(MatMenuTrigger) triggers: QueryList<MatMenuTrigger>;
+}

src/material/menu/menu.ts

@@ -225,6 +225,13 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
   @Output() readonly closed: EventEmitter<void | 'click' | 'keydown' | 'tab'> =
       new EventEmitter<void | 'click' | 'keydown' | 'tab'>();
 
+
+  /**
+   * Stream that emits the trigger that the menu was opened by.
+   * @docs-private
+   */
+  @Output() openedBy = new EventEmitter<any>();
+
   /**
    * Event emitted when the menu is closed.
    * @deprecated Switch to `closed` instead
@@ -249,6 +256,7 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
   ngOnDestroy() {
     this._tabSubscription.unsubscribe();
     this.closed.complete();
+    this.openedBy.complete();
   }
 
   /** Stream that emits whenever the hovered menu item changes. */

tools/public_api_guard/material/menu.d.ts

@@ -17,6 +17,7 @@ export declare class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatM
     hasBackdrop: boolean | undefined;
     items: QueryList<MatMenuItem>;
     lazyContent: MatMenuContent;
+    openedBy: EventEmitter<any>;
     overlapTrigger: boolean;
     panelClass: string;
     parentMenu: MatMenuPanel | undefined;
@@ -102,6 +103,7 @@ export interface MatMenuPanel<T = any> {
     focusFirstItem: (origin?: FocusOrigin) => void;
     hasBackdrop?: boolean;
     lazyContent?: MatMenuContent;
+    openedBy?: EventEmitter<any>;
     overlapTrigger: boolean;
     parentMenu?: MatMenuPanel | undefined;
     removeItem?: (item: T) => void;