angular / angular/components

bug(MatMenu): Menu item with menuTrigger combine with menu item in sub component does not clos sub menu

Open
#27,962 0 comments 0 reactions 0 assignees View on GitHub
area: material/menu P4
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

![image](https://github.com/angular/components/assets/6987117/f79c0a39-5f3e-4ccc-b888-30b3d3a8038a)

A mat-menu, using a `mat-menu-item` with a `matMenuTriggerFor` next to a menu-item in a sub component does not properly closes sub menu and handle highlighted item on mouse over.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/x3u2hh?file=src%2Fexample%2Fmenu-nested-example.html
Steps to reproduce:
1. Open menu by clicking _Animal index_ button
2. Mouse Over _Vertebrates_ menu, the sub menu opens
3. Mouse Over _Menu item component_

### Expected Behavior

The Vertebrates sub menu should close and Vertebrates menu should no longer be highlighted
only menu-item _Menu item component_ should be highlighted

### Actual Behavior

The Vertebrates sub menu is still open and Vertebrates menu is still highlighted along with _Menu item component_

### Environment

- Angular: 16.1
- CDK/Material: 16.2.9
- Browser(s): chrome / Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially src/example/menu-nested-example.html, and reproduce the hover sequence for the nested mat-menu. Trace the menu-item and matMenuTriggerFor interaction to determine why the parent remains highlighted and open; done means the Vertebrates submenu closes and only Menu item component remains highlighted.

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
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.