angular element with overlay rendered in overlay
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Reproduction
https://github.com/rcketscientist/AngularElementOverlayRepro
Steps to reproduce:
1. Create an Angular Element that leverages a CdkOverlay Material widget (tooltip, select, etc)
2. Place that selector in a CdkOverlay (MatDialog, for example).
As soon you interact with the "inner" CdkOverlay by hovering over the tooltip or activating the select, the host CdkOverlay will just crash without an error message I can pick up on.
This might not really be a bug, but rather a limitation of Angular Elements, but being that it can be triggered with simple widgets I wonder if there's not some way I can get the Angular Elements to play well with the host.
The Angular Elements work fine when not hosted in a CdkOverlay.
#### Expected Behavior
What behavior were you expecting to see?
CdkOverlay within Angular Element plays well with the host.
#### Actual Behavior
What behavior did you actually see?
Acitvation of the CdkOverlay within an Angular Element causes the host CdkOverlay to silently crash.
#### Environment
- Angular:8
- CDK/Material: 8
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Win/Mac
Contributor guide
Research direction
Start with the reproduction at https://github.com/rcketscientist/AngularElementOverlayRepro and reproduce the failure using Angular 8, CDK/Material 8, and Chrome. Investigate interaction between an Angular Element's CDK Overlay widget and its host overlay; done means tooltip or select interaction no longer silently crashes the host overlay, or the limitation is documented.
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
- Needs clarification
- Newbie friendliness
- 35/100