fix(cdk/menu): close sibling triggers when opening a menu

Currently, when any sibling menu is opened then it overlaps and in cases it makes the screen unresponsive. This fix will close any sibling menu if its open

Fixes #30881

Author: mistrykaran91

Diff for: goldens/cdk/menu/index.api.md

@@ -273,15 +273,6 @@ export type ContextMenuCoordinates = {
     y: number;
 };
 
-// @public
-export class ContextMenuTracker {
-    update(trigger: CdkContextMenuTrigger): void;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ContextMenuTracker, never>;
-    // (undocumented)
-    static ɵprov: i0.ɵɵInjectableDeclaration<ContextMenuTracker>;
-}
-
 // @public
 export interface FocusableElement {
     _elementRef: ElementRef<HTMLElement>;

Diff for: src/cdk/menu/context-menu-trigger.ts

@@ -11,7 +11,6 @@ import {
   ChangeDetectorRef,
   Directive,
   inject,
-  Injectable,
   Input,
   OnDestroy,
 } from '@angular/core';
@@ -27,6 +26,7 @@ import {merge, partition} from 'rxjs';
 import {skip, takeUntil, skipWhile} from 'rxjs/operators';
 import {MENU_STACK, MenuStack} from './menu-stack';
 import {CdkMenuTriggerBase, MENU_TRIGGER} from './menu-trigger-base';
+import {MenuTracker} from './menu-tracker';
 
 /** The preferred menu positions for the context menu. */
 const CONTEXT_MENU_POSITIONS = STANDARD_DROPDOWN_BELOW_POSITIONS.map(position => {
@@ -37,24 +37,6 @@ const CONTEXT_MENU_POSITIONS = STANDARD_DROPDOWN_BELOW_POSITIONS.map(position =>
   return {...position, offsetX, offsetY};
 });
 
-/** Tracks the last open context menu trigger across the entire application. */
-@Injectable({providedIn: 'root'})
-export class ContextMenuTracker {
-  /** The last open context menu trigger. */
-  private static _openContextMenuTrigger?: CdkContextMenuTrigger;
-
-  /**
-   * Close the previous open context menu and set the given one as being open.
-   * @param trigger The trigger for the currently open Context Menu.
-   */
-  update(trigger: CdkContextMenuTrigger) {
-    if (ContextMenuTracker._openContextMenuTrigger !== trigger) {
-      ContextMenuTracker._openContextMenuTrigger?.close();
-      ContextMenuTracker._openContextMenuTrigger = trigger;
-    }
-  }
-}
-
 /** The coordinates where the context menu should open. */
 export type ContextMenuCoordinates = {x: number; y: number};
 
@@ -87,8 +69,8 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
   /** The directionality of the page. */
   private readonly _directionality = inject(Directionality, {optional: true});
 
-  /** The app's context menu tracking registry */
-  private readonly _contextMenuTracker = inject(ContextMenuTracker);
+  /** The app's menu tracking registry */
+  private readonly _menuTracker = inject(MenuTracker);
 
   private readonly _changeDetectorRef = inject(ChangeDetectorRef);
 
@@ -128,7 +110,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
       // resulting in multiple stacked context menus being displayed.
       event.stopPropagation();
 
-      this._contextMenuTracker.update(this);
+      this._menuTracker.update(this);
       this._open(event, {x: event.clientX, y: event.clientY});
 
       // A context menu can be triggered via a mouse right click or a keyboard shortcut.

Diff for: src/cdk/menu/menu-tracker.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Injectable} from '@angular/core';
+import {CdkContextMenuTrigger} from './context-menu-trigger';
+import {CdkMenuTrigger} from './menu-trigger';
+
+/** Tracks the last open menu trigger across the entire application. */
+@Injectable({providedIn: 'root'})
+export class MenuTracker<T extends CdkContextMenuTrigger | CdkMenuTrigger> {
+  /** The last open menu trigger. */
+  private static _openMenuTrigger?: CdkContextMenuTrigger | CdkMenuTrigger;
+
+  /**
+   * Close the previous open menu and set the given one as being open.
+   * @param trigger The trigger for the currently open Menu.
+   */
+  update(trigger: T) {
+    if (MenuTracker._openMenuTrigger !== trigger) {
+      MenuTracker._openMenuTrigger?.close();
+      MenuTracker._openMenuTrigger = trigger;
+    }
+  }
+}

Diff for: src/cdk/menu/menu-trigger.ts

@@ -43,6 +43,7 @@ import {PARENT_OR_NEW_MENU_STACK_PROVIDER} from './menu-stack';
 import {MENU_AIM} from './menu-aim';
 import {CdkMenuTriggerBase, MENU_TRIGGER} from './menu-trigger-base';
 import {eventDispatchesNativeClick} from './event-detection';
+import {MenuTracker} from './menu-tracker';
 
 /**
  * A directive that turns its host element into a trigger for a popup menu.
@@ -84,6 +85,9 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
   private readonly _renderer = inject(Renderer2);
   private _cleanupMouseenter: () => void;
 
+  /** The app's menu tracking registry */
+  private readonly _menuTracker = inject(MenuTracker);
+
   /** The parent menu this trigger belongs to. */
   private readonly _parentMenu = inject(CDK_MENU, {optional: true});
 
@@ -107,6 +111,9 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
 
   /** Open the attached menu. */
   open() {
+    if (!this._parentMenu) {
+      this._menuTracker.update(this);
+    }
     if (!this.isOpen() && this.menuTemplateRef != null) {
       this.opened.next();