From 0abc7122d2d50f8a89f50f683e4d34129d228c31 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 30 Jan 2019 22:59:36 +0100
Subject: [PATCH] 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.
---
 src/lib/chips/chip-list.spec.ts | 20 +++++++++++++++++++-
 src/lib/chips/chip-list.ts      | 22 ++++++++++++++++++----
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts
index 8631b46365a..1255b0de1a3 100644
--- a/src/lib/chips/chip-list.spec.ts
+++ b/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;
diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts
index f292496c785..8e66bc1ccfe 100644
--- a/src/lib/chips/chip-list.ts
+++ b/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;
+      });
+    }
+  }
 }