angular / angular/components

bug(mat-autocomplete): async mat-autocomplete drop-down items do not render when using Cypress

Offen
#26,227 5 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/autocomplete P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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 using mat-autocomplete in our application normally, everything works as expected.
When running our e2e tests in a cypress chrome runner, the options fail to render in the HTML, and the autocomplete presents no options.

Sorry if this isn't the right place to file this bug, but we're very unsure of the cause.

### Reproduction

Steps to reproduce:
1. Have mat-autocomplete that loads async data for it's mat-options
2. Run cypress e2e test that focuses the input that triggers the mat-autocomplete
3. Notice that the mat-autocomplete drop down does not show
4. Notice that the mat-options are not rendered when inspecting the HTML

### Expected Behavior

We expect to see the dropdown as pictured below, with content in it

![ships-blurred](https://user-images.githubusercontent.com/1770326/206749261-c0facc49-7c27-4cbe-9d44-ee1fbe10e75c.png)

### Actual Behavior

When in the cypress test runner, the drop down does not render.

![image](https://user-images.githubusercontent.com/1770326/206749618-343b51bf-30d8-4fbf-99b0-08c195b25524.png)

![image (2)](https://user-images.githubusercontent.com/1770326/206749173-88a4950f-15cb-4749-ad69-90bad4da80ac.png)

### Environment

- Angular: 14.2.1
- CDK/Material: 14.2.1
- Browser(s): Cypress Chrome 108
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere den gemeldeten Fall mit async mat-autocomplete in Cypress Chrome 108 unter Verwendung von Angular/CDK Material 14.2.1 und vergleiche ihn anschließend mit demselben Autocomplete außerhalb des Cypress-Runners. Untersuche, warum die mat-options im gerenderten HTML fehlen; fertig ist die Aufgabe, wenn das Dropdown und die asynchron geladenen Optionen während des Cypress-Tests gerendert werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

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

Neue Issues direkt in Ihr Postfach

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