bug(CdkMenuItem): arrow-key navigation over disabled menu items requires two key presses in Angular v20

[rojasjandro89]

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

19

Description

In version 20 of Angular/CDK using cdkMenu + cdkMenuItem, when a menu item is disabled (via the cdkMenuItemDisabled input), the item is skipped visually in the menu list, but the keyboard navigation (up/down arrow keys) still lands on it (or “pauses” on it) so that two key presses are required to move to the next non-disabled item.

Setting both disabled and cdlMenuItemDisabled worked in v19 (as stated here). But that's no longer the case for v20 (at least as of 20.2.12)

Reproduction

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

1. Click any option
2. Press the arrow keys until you reach the disabled option
3. Notice that you need to press the key twice to jump to the next available option

Expected Behavior

The disabled options should not be considered by the key manager. We should have to press the arrow key just once to get to the next available enabled menu item.

Actual Behavior

Keyboard navigation requires two key presses to move past a disabled item. The disabled item neither visibly shows focus nor stays in place with the first key press, resulting in confusing/delayed navigation.

Environment

• Angular: 20.3.10
• CDK/Material: 20.2.12
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS Sequoia

[adolgachev]

This is actually the correct behavior. See #31179 and #31721.

[rojasjandro89]

Oh, that caught me off guard — it was working in v19. Thanks for the clarification!