fix(material/chips): Async chips with a delay are not highlighted

Fixes a bug in the Angular Material `chips` component where async chips with a delay were not highlighted correctly.

Fixes #27370

Author: yurakhomitsky

src/material/chips/chip-listbox.spec.ts

@@ -20,6 +20,8 @@ import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/t
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {MatChipListbox, MatChipOption, MatChipsModule} from './index';
+import {asyncScheduler, BehaviorSubject, Observable} from 'rxjs';
+import {observeOn} from 'rxjs/operators';
 
 describe('MDC-based MatChipListbox', () => {
   let fixture: ComponentFixture<any>;
@@ -462,8 +464,8 @@ describe('MDC-based MatChipListbox', () => {
         fixture.detectChanges();
 
         expect(fixture.componentInstance.chipListbox.value)
-          .withContext('Expect value to be undefined')
-          .toBeUndefined();
+          .withContext('Expect value to be null')
+          .toBeNull();
         expect(array[2].selected).withContext('Expect disabled chip not selected').toBeFalsy();
         expect(fixture.componentInstance.chipListbox.selected)
           .withContext('Expect no selected chips')
@@ -828,6 +830,60 @@ describe('MDC-based MatChipListbox', () => {
             .toBeFalsy();
         });
       });
+
+      describe('async multiple selection', () => {
+        it('should select initial async chips', fakeAsync(() => {
+          fixture = createComponent(AsyncMultiSelectionChipListbox, undefined, initFixture => {
+            initFixture.componentInstance.control = new FormControl(['tutorial-1', 'tutorial-2']);
+          });
+          fixture.detectChanges();
+          flush();
+
+          tick(400);
+          fixture.detectChanges();
+
+          let array = fixture.componentInstance.chips.toArray();
+
+          expect(array.length).withContext('Expect chips not to be rendered yet').toBe(0);
+
+          tick(100);
+          fixture.detectChanges();
+
+          array = fixture.componentInstance.chips.toArray();
+          flush();
+
+          expect(array[0].selected)
+            .withContext('Expect "tutorial-1" chip to be selected')
+            .toBe(true);
+          expect(array[1].selected)
+            .withContext('Expect "tutorial-2" chip to be selected')
+            .toBe(true);
+        }));
+
+        it('should select async chips that changed over time', fakeAsync(() => {
+          fixture = createComponent(AsyncMultiSelectionChipListbox, undefined, initFixture => {
+            initFixture.componentInstance.control = new FormControl(['tutorial-1']);
+          });
+          fixture.detectChanges();
+          flush();
+
+          tick(500);
+          fixture.detectChanges();
+
+          fixture.componentInstance.control.setValue(['tutorial-4']);
+          fixture.componentInstance.updateChips(['tutorial-3', 'tutorial-4']);
+
+          tick(500);
+          fixture.detectChanges();
+
+          const array = fixture.componentInstance.chips.toArray();
+          flush();
+
+          expect(array[1].selected)
+            .withContext('Expect "tutorial-4" chip to be selected')
+            .toBe(true);
+        }));
+      });
     });
   });
 
@@ -947,6 +1003,27 @@ class MultiSelectionChipListbox {
   @ViewChildren(MatChipOption) chips: QueryList<MatChipOption>;
 }
 
+@Component({
+  template: `
+      <mat-chip-listbox [multiple]="true" [formControl]="control">
+        <mat-chip-option *ngFor="let chip of chips$ | async" [value]="chip">
+          {{ chip }}
+        </mat-chip-option>
+      </mat-chip-listbox>
+  `,
+})
+class AsyncMultiSelectionChipListbox {
+  private _chipsSubject = new BehaviorSubject(['tutorial-1', 'tutorial-2', 'tutorial-3']);
+  chips$: Observable<string[]> = this._chipsSubject.pipe(observeOn(asyncScheduler, 500));
+  control = new FormControl<string[] | null>(null);
+  @ViewChild(MatChipListbox) chipListbox: MatChipListbox;
+  @ViewChildren(MatChipOption) chips: QueryList<MatChipOption>;
+
+  updateChips(chips: string[]): void {
+    this._chipsSubject.next(chips);
+  }
+}
+
 @Component({
   template: `
       <mat-chip-listbox [formControl]="control">

src/material/chips/chip-listbox.ts

@@ -105,9 +105,6 @@ export class MatChipListbox
   // TODO: MDC uses `grid` here
   protected override _defaultRole = 'listbox';
 
-  /** Value that was assigned before the listbox was initialized. */
-  private _pendingInitialValue: any;
-
   /** Default chip options. */
   private _defaultOptions = inject(MAT_CHIPS_DEFAULT_OPTIONS, {optional: true});
 
@@ -192,7 +189,9 @@ export class MatChipListbox
     return this._value;
   }
   set value(value: any) {
-    this.writeValue(value);
+    if (this._chips && this._chips.length) {
+      this._setSelectionByValue(value, false);
+    }
     this._value = value;
   }
   protected _value: any;
@@ -210,14 +209,10 @@ export class MatChipListbox
   override _chips: QueryList<MatChipOption> = undefined!;
 
   ngAfterContentInit() {
-    if (this._pendingInitialValue !== undefined) {
+    this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
       Promise.resolve().then(() => {
-        this._setSelectionByValue(this._pendingInitialValue, false);
-        this._pendingInitialValue = undefined;
+        this._setSelectionByValue(this.value, false);
       });
-    }
-
-    this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
       // Update listbox selectable/multiple properties on chips
       this._syncListboxProperties();
     });
@@ -263,11 +258,7 @@ export class MatChipListbox
    * @docs-private
    */
   writeValue(value: any): void {
-    if (this._chips) {
-      this._setSelectionByValue(value, false);
-    } else if (value != null) {
-      this._pendingInitialValue = value;
-    }
+    this.value = value;
   }
 
   /**