bug(CdkMenu): Pressing Right while on an open submenu skips an item in the parent

[toxik]

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

Having a CdkMenuBar with 3 elements, the first of which has a submenu, navigation is wrong when pressing right arrow (left arrow works fine)

Reproduction

StackBlitz link: https://stackblitz.com/edit/gdabapzb?file=src%2Fexample%2Fcdk-menu-menubar-example.html
Steps to reproduce:

1. open the first menu
2. press right arrow

Expected Behavior

focus should move to second item

Actual Behavior

focus moves to third item

Environment

• Angular: 20.1
• CDK/Material: 20.1
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

Screen.Recording.2025-08-12.at.02.39.21.mp4

[mmalerba]

Slightly more detailed repro steps:

1. tab to the menu, observe "first" is focused
2. press down, observe "sub1" is focused
3. press right, observe "first" is focused --- is this correct? or should "second" be focused?
4. press right, observe "third" is focused --- this is clearly wrong, "second" was skipped

I suspect maybe on step 3 the menu is in some kind of inconsistent state where "first" is actually focused, but the menu thinks internally that "second" is focused

[toxik]

hey @mmalerba is there a workaround?

[crisbeto]

I spent some time investigating this and it's actually a setup issue. The problem is that #submenu is defined inside of the menu bar which causes Angular to pick up its menu items as belonging to the menu bar. You can fix it by moving the #submenu out of the menu bar like this: https://stackblitz.com/edit/gdabapzb-abcazspd?file=src%2Fexample%2Fcdk-menu-menubar-example.html

That being said, I think that we should be able to handle this internally.

[toxik]

great, thank you @crisbeto !