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>;
@@ -358,6 +349,15 @@ export interface MenuStackItem {
     menuStack?: MenuStack;
 }
 
+// @public
+export class MenuTracker<T extends CdkContextMenuTrigger | CdkMenuTrigger> {
+    update(trigger: T): void;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuTracker<any>, never>;
+    // (undocumented)
+    static ɵprov: i0.ɵɵInjectableDeclaration<MenuTracker<any>>;
+}
+
 // @public
 export const PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER: (orientation: "vertical" | "horizontal") => {
     provide: InjectionToken<MenuStack>;

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

@@ -11,7 +11,6 @@ import {
   ChangeDetectorRef,
   Directive,
   inject,
-  Injectable,
   Input,
   OnDestroy,
 } from '@angular/core';
@@ -26,7 +25,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 +36,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 +68,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 +109,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-trigger-base.ts

@@ -10,6 +10,7 @@ import {
   Directive,
   EventEmitter,
   inject,
+  Injectable,
   InjectionToken,
   Injector,
   OnDestroy,
@@ -21,6 +22,8 @@ import {MENU_STACK, MenuStack} from './menu-stack';
 import {ConnectedPosition, Overlay, OverlayRef, ScrollStrategy} from '../overlay';
 import {TemplatePortal} from '../portal';
 import {merge, Subject} from 'rxjs';
+import {CdkContextMenuTrigger} from './context-menu-trigger';
+import {CdkMenuTrigger} from './menu-trigger';
 
 /** Injection token used for an implementation of MenuStack. */
 export const MENU_TRIGGER = new InjectionToken<CdkMenuTriggerBase>('cdk-menu-trigger');
@@ -37,6 +40,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<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;
+    }
+  }
+}
+
 /**
  * Abstract directive that implements shared logic common to all menu triggers.
  * This class can be extended to create custom menu trigger types.

Diff for: 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';
 
 /**
@@ -84,6 +84,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 +110,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();