angular / angular/components

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

Open
#26,227 5 comments 0 reactions 0 assignees View on GitHub
area: material/autocomplete P3
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

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

Contributor guide

Open the contributing guide

Research direction

Reproduce the reported async mat-autocomplete case in Cypress Chrome 108 using Angular/CDK Material 14.2.1, then compare it with the same autocomplete outside the Cypress runner. Investigate why the mat-options are absent from the rendered HTML; done means the dropdown and asynchronously loaded options render during the Cypress test.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, cypress, typescript
Domain
frontend, testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.