bug(CdkMenuItem): Main menu closes after clicking on a menu item that is a menu

[Xylios13]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Clicking on a menu item that is also a menu will close the whole menu, instead of closing only the opened submenu.

Reproduction

StackBlitz link: https://stackblitz.com/edit/4aortd
Steps to reproduce:

1. Click on File button
2. Click on New menu item

Expected Behavior

The submenu for the New menu item is closed (or kept open), the menu associated with File is kept open (like a CdkMenuBar or the menu nested example: https://material.angular.io/components/menu/examples#menu-nested)

Actual Behavior

The submenu for the New menu item is closed and the File menu is closed as well.

Environment

• Angular: 19.0.0
• CDK/Material: 19.0.0
• Browser(s): 131.0.6778.70 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro

[LukasMachetanz]

We are experiencing the same problem. Is there a workaround in the meantime?

[mistrykaran91]

@Xylios13 @LukasMachetanz @crisbeto : Seems to be working, or am I missing something ?
https://material.angular.io/cdk/menu/examples#cdk-menu-menubar

[Xylios13]

Hello @mistrykaran91, indeed that example works as I mentioned in the Expected Behavior. I'm sorry if it wasn't clear enough in the issue description.

If you are using a CdkMenuBar the menus work as intended. The problem is when you use CdkMenu and CdkMenuItem, you can check the provided stackblitz.

There we use:
<button class="example-menu-bar-item" [cdkMenuTriggerFor]="file">File</button>
instead of
<div cdkMenuBar></div>

Let me know if you have any more doubts.