angular / angular/components

bug(mat-select): wrong initial values when using async object property

Open
#27,220 4 comments 0 reactions 0 assignees View on GitHub
area: material/select P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14.2.12

### Description

Hey everyone, if I try to access a property of an object loaded with the async pipe it appears to be empty until I click inside the mat-select element.

It's hard to explain so there's a stackblitz to show the issue.

### Reproduction

https://stackblitz.com/edit/rjpwlz?file=src%2Fexample%2Fselect-no-ripple-example.html

### Expected Behavior

The first mat-select in the example should initially display "2"

### Actual Behavior

The first mat-select seems empty until you click on it

### Environment

- Angular: 16.0.4
- CDK/Material: 16.0.3
- Browser(s): Chrome 113.0.5672.127
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and verify the behavior using Angular 16.0.4 with CDK/Material 16.0.3. Compare the first mat-select's initial rendering with the previous 14.2.12 behavior, and consider the issue done when the async object property initially displays "2" without clicking the select.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.