angular / angular/components

angular element with overlay rendered in overlay

Offen
#16,862 17 Kommentare 14 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/overlay feature P5
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie mit der Reproduktion unter https://github.com/rcketscientist/AngularElementOverlayRepro und reproduzieren Sie den Fehler mit Angular 8, CDK/Material 8 und Chrome. Untersuchen Sie die Interaktion zwischen dem CDK Overlay-Widget eines Angular Element und seinem Host-Overlay; abgeschlossen ist die Aufgabe, wenn die Tooltip- oder Select-Interaktion das Host-Overlay nicht mehr unbemerkt zum Absturz bringt oder die Einschränkung dokumentiert ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.