fix(material/select): changed after checked error if option label changes (#23315)

Fixes a "changed after checked" error that is thrown if the label of a selected option changes dynamically.

This is alternate approach to #14797 which was tricky to land, because it introduced an extra timeout.

Fixes #14793.

Author: crisbeto

src/material/core/option/option.ts

@@ -225,8 +225,11 @@ export class _MatOptionBase<T = any> implements FocusableOption, AfterViewChecke
       const viewValue = this.viewValue;
 
       if (viewValue !== this._mostRecentViewValue) {
+        if (this._mostRecentViewValue) {
+          this._stateChanges.next();
+        }
+
         this._mostRecentViewValue = viewValue;
-        this._stateChanges.next();
       }
     }
   }

src/material/legacy-select/select.spec.ts

@@ -1831,6 +1831,19 @@ describe('MatSelect', () => {
         expect(trigger.textContent!.trim()).toBe('Calzone');
       }));
 
+      it('should update the trigger value if the text as a result of an expression change', fakeAsync(() => {
+        fixture.componentInstance.control.setValue('pizza-1');
+        fixture.detectChanges();
+
+        expect(trigger.textContent!.trim()).toBe('Pizza');
+
+        fixture.componentInstance.capitalize = true;
+        fixture.detectChanges();
+        fixture.checkNoChanges();
+
+        expect(trigger.textContent!.trim()).toBe('PIZZA');
+      }));
+
       it('should not select disabled options', fakeAsync(() => {
         trigger.click();
         fixture.detectChanges();
@@ -5202,7 +5215,7 @@ describe('MatSelect', () => {
         [panelClass]="panelClass" [disableRipple]="disableRipple"
         [typeaheadDebounceInterval]="typeaheadDebounceInterval">
         <mat-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
-          {{ food.viewValue }}
+          {{ capitalize ? food.viewValue.toUpperCase() : food.viewValue }}
         </mat-option>
       </mat-select>
       <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
@@ -5233,6 +5246,7 @@ class BasicSelect {
   panelClass = ['custom-one', 'custom-two'];
   disableRipple: boolean;
   typeaheadDebounceInterval: number;
+  capitalize = false;
 
   @ViewChild(MatLegacySelect, {static: true}) select: MatLegacySelect;
   @ViewChildren(MatLegacyOption) options: QueryList<MatLegacyOption>;

src/material/select/select.spec.ts

@@ -1879,6 +1879,19 @@ describe('MDC-based MatSelect', () => {
         expect(trigger.textContent!.trim()).toBe('Calzone');
       }));
 
+      it('should update the trigger value if the text as a result of an expression change', fakeAsync(() => {
+        fixture.componentInstance.control.setValue('pizza-1');
+        fixture.detectChanges();
+
+        expect(trigger.textContent!.trim()).toBe('Pizza');
+
+        fixture.componentInstance.capitalize = true;
+        fixture.detectChanges();
+        fixture.checkNoChanges();
+
+        expect(trigger.textContent!.trim()).toBe('PIZZA');
+      }));
+
       it('should not select disabled options', fakeAsync(() => {
         trigger.click();
         fixture.detectChanges();
@@ -4410,7 +4423,7 @@ describe('MDC-based MatSelect', () => {
         [panelClass]="panelClass" [disableRipple]="disableRipple"
         [typeaheadDebounceInterval]="typeaheadDebounceInterval">
         <mat-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
-          {{ food.viewValue }}
+          {{ capitalize ? food.viewValue.toUpperCase() : food.viewValue }}
         </mat-option>
       </mat-select>
       <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
@@ -4442,6 +4455,7 @@ class BasicSelect {
   panelClass = ['custom-one', 'custom-two'];
   disableRipple: boolean;
   typeaheadDebounceInterval: number;
+  capitalize = false;
 
   @ViewChild(MatSelect, {static: true}) select: MatSelect;
   @ViewChildren(MatOption) options: QueryList<MatOption>;

src/material/select/select.ts

@@ -961,7 +961,10 @@ export abstract class _MatSelectBase<C>
     merge(...this.options.map(option => option._stateChanges))
       .pipe(takeUntil(changedOrDestroyed))
       .subscribe(() => {
-        this._changeDetectorRef.markForCheck();
+        // `_stateChanges` can fire as a result of a change in the label's DOM value which may
+        // be the result of an expression changing. We have to use `detectChanges` in order
+        // to avoid "changed after checked" errors (see #14793).
+        this._changeDetectorRef.detectChanges();
         this.stateChanges.next();
       });
   }