bug(popups): Material popups shown from native HTML dialog don't register mouse events.
- 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
Mouse events not registering on multiple material components inside native Dialog.
Originally they appeared behind the dialog due to being created outside of #top-layer.
https://github.com/angular/components/issues/25799
Now they mostly just don't work. They appear in-front of dialog... but mouse events (click/hover) don't register.
https://stackblitz.com/edit/stackblitz-starters-wmwfsj8g?file=src%2Fmain.ts
### Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-wmwfsj8g?file=src%2Fmain.ts
Steps to reproduce:
1. click button to open a native dialog
2. click any of the material components
### Expected Behavior
The MatMenu and DatePicker should work as expected.
### Actual Behavior
Ignores mouse events.
### Environment
- Angular: 21.1.3
- CDK/Material: 21.1.3
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
Contributor guide
Research direction
Start with the linked StackBlitz reproduction in src/main.ts and verify the behavior in Chrome: open the native dialog, then try the MatMenu and DatePicker. Trace how these material popups are positioned relative to the native dialog's top layer and confirm that clicks and hover events reach the components. Done means both components respond to mouse events while the dialog is open.
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
- 42/100