components
components copied to clipboard
angular
bug(CdkMenu): Using keyboard and mouse to open sub-menus will not close previous sub menus and will crash the browser
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:
- click the menu trigger button to open the first menu
- hover with the mouse on the first menu item to open a sub-menu
- 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
Hello, I cannot reproduce browser crash.
- Windows 10 Enterprise Version 22H2
- Chrome Version 123.0.6312.123 (Official Build) (64-bit)
- test site, https://stackblitz.com/edit/stackblitz-starters-vcre5b?file=src%2Fmain.ts
Do you see overlapping sub menus? Is there something I can do to make it easier to reproduce?
Best Regards,
Zach
Do you see overlapping sub menus? Is there something I can do to make it easier to reproduce?
@zarend yes, I see overlapping menus. I reproduced it again on Edge this time. Click the trigger, hover on the first item (opens a submenu), press the arrow-down key to the 2nd item and right-arrow key to expand the 2nd submenu. Then hover with the mouse on the first submenu.
Here's a gif showing it:
(I added a border around the button and a hover effect to show the crash)