bug(CdkMenu): Using keyboard and mouse to open sub-menus will not close previous sub menus and will crash the browser
- 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
Mixing keyboard navigation and mouse to open nested menus opens multiple nested menus (without closing previous ones) and eventually crashes the browser.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-vcre5b?file=src%2Fmain.ts
Steps to reproduce:
1. click the menu trigger button to open the first menu
2. hover with the mouse on the first menu item to open a sub-menu
3. press the down key (will highlight the 2nd menu item) and then "right" key to open the second sub-menu
To crash the browser:
4. hover the mouse on the first sub-menu that is open
### Expected Behavior
The first sub-menu will close once a 2nd one is opened.
### Actual Behavior
First sub-menu remains open when the 2nd one appears on top
### Environment
- Angular: 17.2
- CDK/Material: 17.2
- Browser(s): Chrome/Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and inspect the CdkMenu keyboard and mouse navigation behavior described in steps 1–4. Confirm that opening the second sub-menu closes the first, and that hovering the open sub-menu no longer crashes Chrome or Edge; the report names no repository files or tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100