bug(matMenuTriggerFor): nested menu element is activated right away if it appears above its trigger
- 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
When a nested menu element appears above its trigger `mat-menu-item` it is activated right away.
### Reproduction
StackBlitz link: https://stackblitz.com/run?file=src%2Fapp%2Fmenu-nested-example.ts
Steps to reproduce:
1. Make the window small enough for the nested menu to appear above the trigger (e.g. using chrome dev tools).
2. Tap (!) the menu trigger
### Expected Behavior
The menu is opened, but the item is not activated
### Actual Behavior
The menu is opened, but closed right away with the item below the cursor activated
### Environment
- Angular: 19 (happens in earlier versions too)
- CDK/Material: 19
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):
all of them
Contributor guide
Research direction
Start with the StackBlitz reproduction in src/app/menu-nested-example.ts and make the window small enough for the nested menu to appear above its trigger. Tap the trigger and verify that the menu opens without immediately closing or activating the item below the cursor; the fix should preserve the expected behavior across the reported Angular and CDK/Material versions.
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