bug(cdk/menu): sub menu with disabled items only is not closed when other sub menu is opened
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
This issue only occurs when using the menu with a keyboard.
If in a cdk menu, a sub menu is opened with ONLY disabled children, and then another sub menu is opened, that sub menu with the disabled children remains open.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/components-issue-stnsdh?file=src%2Fapp%2Fexample-component.html
Steps to reproduce:
1. focus "Open Menu" button
2. press space / open menu
3. navigate to menu item "With disabled child" using arrow keys
4. open sub menu by pressing arrow right
5. navigate to "With enabled child" by pressing arrow up
6. open sub menu by pressing arrow right
### Expected Behavior
Sub menu with disabled child is closed
### Actual Behavior
Sub menu with disabled child is NOT closed
### Environment
- Angular: 15
- CDK/Material: 15
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and trace the Angular CDK menu keyboard-navigation behavior for submenus containing only disabled children. Verify the sequence in Firefox on Ubuntu, then confirm that opening the second submenu closes the first while preserving the expected keyboard behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 50/100