fix(chips): newly-added chips not being disabled when added to a disable list (#14976)

Fixes newly-added chips not being disabled when they're added to a disabled chip list. The problem comes from the fact that the disabled state is only synced to the chips when it changes.

Author: crisbeto

src/lib/chips/chip-list.spec.ts

@@ -86,6 +86,23 @@ describe('MatChipList', () => {
 
         expect(chips.toArray().every(chip => chip.disabled)).toBe(false);
       });
+
+      it('should disable a chip that is added after the list became disabled', fakeAsync(() => {
+        expect(chips.toArray().every(chip => chip.disabled)).toBe(false);
+
+        chipListInstance.disabled = true;
+        fixture.detectChanges();
+
+        expect(chips.toArray().every(chip => chip.disabled)).toBe(true);
+
+        fixture.componentInstance.items.push(5, 6);
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+
+        expect(chips.toArray().every(chip => chip.disabled)).toBe(true);
+      }));
+
     });
 
     describe('with selected chips', () => {
@@ -1305,7 +1322,7 @@ describe('MatChipList', () => {
 @Component({
   template: `
     <mat-chip-list [tabIndex]="tabIndex" [selectable]="selectable">
-      <div *ngFor="let i of [0,1,2,3,4]">
+      <div *ngFor="let i of items">
        <div *ngIf="remove != i">
           <mat-chip (select)="chipSelect(i)" (deselect)="chipDeselect(i)">
             {{name}} {{i + 1}}
@@ -1315,6 +1332,7 @@ describe('MatChipList', () => {
     </mat-chip-list>`
 })
 class StandardChipList {
+  items = [0, 1, 2, 3, 4];
   name: string = 'Test';
   selectable: boolean = true;
   remove: number;

src/lib/chips/chip-list.ts

@@ -267,10 +267,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
   get disabled(): boolean { return this.ngControl ? !!this.ngControl.disabled : this._disabled; }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
-
-    if (this.chips) {
-      this.chips.forEach(chip => chip.disabled = this._disabled);
-    }
+    this._syncChipsDisabledState();
   }
   protected _disabled: boolean = false;
 
@@ -370,6 +367,14 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
 
     // When the list changes, re-subscribe
     this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
+      if (this.disabled) {
+        // Since this happens after the content has been
+        // checked, we need to defer it to the next tick.
+        Promise.resolve().then(() => {
+          this._syncChipsDisabledState();
+        });
+      }
+
       this._resetChips();
 
       // Reset chips selected/deselected status
@@ -775,4 +780,13 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
   private _hasFocusedChip() {
     return this.chips.some(chip => chip._hasFocus);
   }
+
+  /** Syncs the list's disabled state with the individual chips. */
+  private _syncChipsDisabledState() {
+    if (this.chips) {
+      this.chips.forEach(chip => {
+        chip.disabled = this._disabled;
+      });
+    }
+  }
 }