bug(CHIPS): Async Chips are not highlighted with Forms

[yurakhomitsky]

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

Async chips are not highlighted when used in conjunction with Forms.

This issue is present in Angular 15 and 16 version and probably older

Reproduction

StackBlitz link: Link

Steps to Reproduce:

1. Create a mat-chip-listbox with mat-chip-option and add either formControl or ngModel.
2. Set a value to the formControl, which can be set asynchronously or synchronously.
3. Render the mat-chip-option with a delay, achieved through the usage of an async pipe and the .pipe(observeOn(asyncScheduler, 1000)).
4. Observe that the selected chips are not being highlighted.

Expected Behavior

The mat-chip-listbox should properly highlight the asynchronously rendered chips

Actual Behavior

The mat-chip-listbox does not highlight the asynchronously rendered chips.

Environment

• Angular: 16.1.2
• Material: 16.1.2
• Browser(s): Chrome
• Operating System (macOS):

[yurakhomitsky]

If you find this ticket an issue, I could look into it, I think I have a solution. Thanks!