components
components copied to clipboard
bug(mat-select): wrong initial values when using async object property
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
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
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
Is there any new regarding this. I have the exact same problem.
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