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

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

Fixes #30881

Author: mistrykaran91

src/cdk/menu/context-menu-trigger.ts

@@ -26,7 +26,7 @@ import {_getEventTarget} from '../platform';
 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 {CdkMenuTriggerBase, MENU_TRIGGER, MenuTracker} from './menu-trigger-base';
 
 /** 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.

src/cdk/menu/menu-trigger-base.ts

@@ -10,6 +10,7 @@ import {
   Directive,
   EventEmitter,
   inject,
+  Injectable,
   InjectionToken,
   Injector,
   OnDestroy,
@@ -37,6 +38,24 @@ export const MENU_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
   },
 );
 
+/** Tracks the last open menu trigger across the entire application. */
+@Injectable({providedIn: 'root'})
+export class MenuTracker {
+  /** The last open menu trigger. */
+  private static _openMenuTrigger?: CdkMenuTriggerBase;
+
+  /**
+   * Close the previous open menu and set the given one as being open.
+   * @param trigger The trigger for the currently open Menu.
+   */
+  update(trigger: CdkMenuTriggerBase) {
+    if (MenuTracker._openMenuTrigger !== trigger) {
+      MenuTracker._openMenuTrigger?.close();
+      MenuTracker._openMenuTrigger = trigger;
+    }
+  }
+}
+
 /**
  * Abstract directive that implements shared logic common to all menu triggers.
  * This class can be extended to create custom menu trigger types.
@@ -60,6 +79,8 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
   /** Function used to configure the scroll strategy for the menu. */
   protected readonly menuScrollStrategy = inject(MENU_SCROLL_STRATEGY);
 
+  abstract close(): void;
+
   /**
    * A list of preferred menu positions to be used when constructing the
    * `FlexibleConnectedPositionStrategy` for this trigger's menu.

src/cdk/menu/menu-trigger.ts

@@ -41,7 +41,7 @@ import {takeUntil} from 'rxjs/operators';
 import {CDK_MENU, Menu} from './menu-interface';
 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 {CdkMenuTriggerBase, MENU_TRIGGER, MenuTracker} from './menu-trigger-base';
 import {eventDispatchesNativeClick} from './event-detection';
 
 /**
@@ -90,6 +90,9 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
   /** The menu aim service used by this menu. */
   private readonly _menuAim = inject(MENU_AIM, {optional: true});
 
+  /** The app's menu tracking registry */
+  private readonly _menuTracker = inject(MenuTracker);
+
   constructor() {
     super();
     this._setRole();
@@ -109,7 +112,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
   open() {
     if (!this.isOpen() && this.menuTemplateRef != null) {
       this.opened.next();
-
+      this._menuTracker.update(this);
       this.overlayRef = this.overlayRef || this._overlay.create(this._getOverlayConfig());
       this.overlayRef.attach(this.getMenuContentPortal());
       this._changeDetectorRef.markForCheck();