fix(material/chips): selectable="false" doesn't work on initial assignment

Fixes #24903.

Author: volvachev

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

@@ -461,6 +461,36 @@ describe('MDC-based MatChipListbox', () => {
           .withContext('Expect no selected chips')
           .toBeUndefined();
       });
+
+      it('should not select when is not selectable', fakeAsync(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+
+        const falsyFixture = createComponent(FalsyBasicChipListbox);
+        falsyFixture.detectChanges();
+        tick();
+        falsyFixture.detectChanges();
+
+        const chipListboxDebugElement = falsyFixture.debugElement.query(
+          By.directive(MatChipListbox),
+        )!;
+        const chips = chipListboxDebugElement.componentInstance._chips;
+        const nativeChips = (
+          chipListboxDebugElement.nativeElement as HTMLElement
+        ).querySelectorAll<HTMLElement>('.mdc-evolution-chip__action--primary');
+
+        expect(chips.first.selected)
+          .withContext('Expected first option not to be selected')
+          .toBe(false);
+
+        dispatchKeyboardEvent(nativeChips[0], 'keydown', SPACE);
+        falsyFixture.detectChanges();
+        flush();
+
+        expect(chips.first.selected)
+          .withContext('Expected first option not to be selected.')
+          .toBe(false);
+      }));
     });
 
     describe('chip list with chip input', () => {
@@ -865,3 +895,33 @@ class SelectedChipListbox {
   ];
   @ViewChildren(MatChipOption) chips: QueryList<MatChipOption>;
 }
+
+@Component({
+  template: `
+      <mat-chip-listbox [formControl]="control" [required]="isRequired"
+        [tabIndex]="tabIndexOverride" [selectable]="selectable">
+        <mat-chip-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
+          {{ food.viewValue }}
+        </mat-chip-option>
+      </mat-chip-listbox>
+  `,
+})
+class FalsyBasicChipListbox {
+  foods: any[] = [
+    {value: 'steak-0', viewValue: 'Steak'},
+    {value: 'pizza-1', viewValue: 'Pizza'},
+    {value: 'tacos-2', viewValue: 'Tacos', disabled: true},
+    {value: 'sandwich-3', viewValue: 'Sandwich'},
+    {value: 'chips-4', viewValue: 'Chips'},
+    {value: 'eggs-5', viewValue: 'Eggs'},
+    {value: 'pasta-6', viewValue: 'Pasta'},
+    {value: 'sushi-7', viewValue: 'Sushi'},
+  ];
+  control = new FormControl<string | null>(null);
+  isRequired: boolean;
+  tabIndexOverride: number;
+  selectable: boolean = false;
+
+  @ViewChild(MatChipListbox) chipListbox: MatChipListbox;
+  @ViewChildren(MatChipOption) chips: QueryList<MatChipOption>;
+}

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

@@ -743,6 +743,33 @@ describe('MatChipList', () => {
         .withContext('Expect no selected chips')
         .toBeUndefined();
     });
+
+    it('should not select when is not selectable', fakeAsync(() => {
+      fixture.destroy();
+      TestBed.resetTestingModule();
+
+      const falsyFixture = createComponent(FalsyBasicChipList);
+      falsyFixture.detectChanges();
+      tick();
+      falsyFixture.detectChanges();
+
+      const chipListDebugElement = falsyFixture.debugElement.query(By.directive(MatChipList))!;
+      const chips = chipListDebugElement.componentInstance.chips;
+      const nativeChips = falsyFixture.debugElement
+        .queryAll(By.css('mat-chip'))
+        .map(chip => chip.nativeElement);
+
+      expect(chips.first.selected)
+        .withContext('Expected first option not to be selected')
+        .toBe(false);
+
+      dispatchKeyboardEvent(nativeChips[0], 'keydown', SPACE);
+      falsyFixture.detectChanges();
+
+      expect(chips.first.selected)
+        .withContext('Expected first option not to be selected.')
+        .toBe(false);
+    }));
   });
 
   describe('forms integration', () => {
@@ -1861,3 +1888,35 @@ class ChipListInsideDynamicFormGroup {
     });
   }
 }
+
+@Component({
+  selector: 'basic-chip-list',
+  template: `
+    <mat-form-field>
+      <mat-chip-list placeholder="Food" [formControl]="control"
+        [tabIndex]="tabIndexOverride" [selectable]="selectable">
+        <mat-chip *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
+          {{ food.viewValue }}
+        </mat-chip>
+      </mat-chip-list>
+    </mat-form-field>
+  `,
+})
+class FalsyBasicChipList {
+  foods: any[] = [
+    {value: 'steak-0', viewValue: 'Steak'},
+    {value: 'pizza-1', viewValue: 'Pizza'},
+    {value: 'tacos-2', viewValue: 'Tacos', disabled: true},
+    {value: 'sandwich-3', viewValue: 'Sandwich'},
+    {value: 'chips-4', viewValue: 'Chips'},
+    {value: 'eggs-5', viewValue: 'Eggs'},
+    {value: 'pasta-6', viewValue: 'Pasta'},
+    {value: 'sushi-7', viewValue: 'Sushi'},
+  ];
+  control = new FormControl<string | null>(null);
+  tabIndexOverride: number;
+  selectable: boolean = false;
+
+  @ViewChild(MatChipList) chipList: MatChipList;
+  @ViewChildren(MatChip) chips: QueryList<MatChip>;
+}

src/material/chips/chip-list.ts

@@ -329,10 +329,7 @@ export class MatChipList
   }
   set selectable(value: BooleanInput) {
     this._selectable = coerceBooleanProperty(value);
-
-    if (this.chips) {
-      this.chips.forEach(chip => (chip.chipListSelectable = this._selectable));
-    }
+    this._syncChipsState();
   }
   protected _selectable: boolean = true;
 
@@ -414,7 +411,7 @@ export class MatChipList
 
     // When the list changes, re-subscribe
     this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
-      if (this.disabled) {
+      if (this.disabled || !this.selectable) {
         // Since this happens after the content has been
         // checked, we need to defer it to the next tick.
         Promise.resolve().then(() => {
@@ -844,6 +841,7 @@ export class MatChipList
       this.chips.forEach(chip => {
         chip._chipListDisabled = this._disabled;
         chip._chipListMultiple = this.multiple;
+        chip.chipListSelectable = this._selectable;
       });
     }
   }