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

[madmurl0c]

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

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

[zarend]

Hello @madmurl0c ,

Thank you for reaching out. I can reproduce on the linked stackblitz. This is interesting, and I'm wondering if it's a problem with the component, or with Angular in general.

Do you notice this behavior on other components, or just with mat-select?

Thanks,
Zach

[madmurl0c]

Greetings @zarend,

Thanks for taking a look at this. I'm not 100% sure but I haven't noticed it with any other component in my apps so far. Manually triggering change detection doesn't seem to work either. I improved the stackblitz a bit but still no idea how to fix this issue

[Savvas-cl]

Is there any new regarding this. I have the exact same problem.

[fugazister]

Hi, i believe the culprit is located here https://github.com/angular/components/blob/main/src/material/core/option/option.ts#L271

If you have async pipe for selected option your first viewValue will be empty string. This means that after pipe update with populated value check https://github.com/angular/components/blob/main/src/material/core/option/option.ts#L271 will be falsey, hence no update