angular / angular/components

angular element with overlay rendered in overlay

Open
#16,862 17 comments 14 reactions 0 assignees View on GitHub
area: cdk/overlay feature P5
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.