fix(material/chips): implement disabledInteractive in chip input (#30665)

Adds a `disabledInteractive` input to `MatChipInput`, similar to what we have in other components.

I've also cleaned up the chips demo a bit.

Author: crisbeto

goldens/material/chips/index.api.md

@@ -252,6 +252,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     clear(): void;
     get disabled(): boolean;
     set disabled(value: boolean);
+    disabledInteractive: boolean;
     // (undocumented)
     protected _elementRef: ElementRef<HTMLInputElement>;
     _emitChipEnd(event?: KeyboardEvent): void;
@@ -260,6 +261,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     // (undocumented)
     _focus(): void;
     focused: boolean;
+    protected _getReadonlyAttribute(): string | null;
     id: string;
     readonly inputElement: HTMLInputElement;
     _keydown(event: KeyboardEvent): void;
@@ -268,17 +270,22 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_disabledInteractive: unknown;
+    // (undocumented)
+    static ngAcceptInputType_readonly: unknown;
+    // (undocumented)
     ngOnChanges(): void;
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     _onInput(): void;
     placeholder: string;
+    readonly: boolean;
     separatorKeyCodes: readonly number[] | ReadonlySet<number>;
     // (undocumented)
     setDescribedByIds(ids: string[]): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabledInteractive": { "alias": "matChipInputDisabledInteractive"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, never>;
 }
@@ -433,6 +440,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
 // @public
 export interface MatChipsDefaultOptions {
     hideSingleSelectionIndicator?: boolean;
+    inputDisabledInteractive?: boolean;
     separatorKeyCodes: readonly number[] | ReadonlySet<number>;
 }
 

src/dev-app/chips/BUILD.bazel

@@ -17,7 +17,6 @@ ng_module(
         "//src/material/core",
         "//src/material/form-field",
         "//src/material/icon",
-        "//src/material/toolbar",
     ],
 )
 

src/dev-app/chips/chips-demo.html

@@ -1,6 +1,6 @@
 <div class="demo-chips">
   <mat-card>
-    <mat-toolbar color="primary">Static Chips</mat-toolbar>
+    <mat-card-header>Static Chips</mat-card-header>
 
     <mat-card-content>
       <h4>Simple</h4>
@@ -111,26 +111,24 @@ <h4>With Events</h4>
   </mat-card>
 
   <mat-card>
-    <mat-toolbar color="primary">Selectable Chips</mat-toolbar>
+    <mat-card-header>Chip Listbox</mat-card-header>
 
     <mat-card-content>
-      <button matButton (click)="disabledListboxes = !disabledListboxes">
-       {{disabledListboxes ? "Enable" : "Disable"}}
-      </button>
-      <button matButton (click)="listboxesWithAvatar = !listboxesWithAvatar">
-       {{listboxesWithAvatar ? "Hide Avatar" : "Show Avatar"}}
-      </button>
+      <p>Chip list utilizing the listbox pattern. Should be used for selectable chips.</p>
+
+      <mat-checkbox [(ngModel)]="disabledListboxes">Disabled</mat-checkbox>
+      <mat-checkbox [(ngModel)]="listboxesWithAvatar">Show avatar</mat-checkbox>
 
       <h4>Single selection</h4>
 
       <mat-chip-listbox multiple="false" [disabled]="disabledListboxes">
         @for (shirtSize of shirtSizes; track shirtSize) {
-            <mat-chip-option [disabled]="shirtSize.disabled">
-              {{shirtSize.label}}
-              @if (listboxesWithAvatar) {
-                <mat-chip-avatar>{{shirtSize.avatar}}</mat-chip-avatar>
-              }
-            </mat-chip-option>
+          <mat-chip-option [disabled]="shirtSize.disabled">
+            {{shirtSize.label}}
+            @if (listboxesWithAvatar) {
+              <mat-chip-avatar>{{shirtSize.avatar}}</mat-chip-avatar>
+            }
+          </mat-chip-option>
           }
       </mat-chip-listbox>
 
@@ -151,7 +149,7 @@ <h4>Multi selection</h4>
   </mat-card>
 
   <mat-card>
-    <mat-toolbar color="primary">Input Chips</mat-toolbar>
+    <mat-card-header>Chip Grid</mat-card-header>
 
     <mat-card-content>
       <p>
@@ -160,13 +158,9 @@ <h4>Multi selection</h4>
         They can be used inside a <code>&lt;mat-form-field&gt;</code>.
       </p>
 
-      <button matButton (click)="disableInputs = !disableInputs">
-       {{disableInputs ? "Enable" : "Disable"}}
-      </button>
-
-      <button matButton (click)="editable = !editable">
-        {{editable ? "Disable editing" : "Enable editing"}}
-      </button>
+      <mat-checkbox [(ngModel)]="disableInputs">Disabled</mat-checkbox>
+      <mat-checkbox [(ngModel)]="editable">Editable</mat-checkbox>
+      <mat-checkbox [(ngModel)]="disabledInteractive">Disabled Interactive</mat-checkbox>
 
       <h4>Input is last child of chip grid</h4>
 
@@ -188,19 +182,15 @@ <h4>Input is last child of chip grid</h4>
                 [matChipInputFor]="chipGrid1"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                 [matChipInputAddOnBlur]="addOnBlur"
+                [matChipInputDisabledInteractive]="disabledInteractive"
                 (matChipInputTokenEnd)="add($event)"
-                aria-label="New contributor input..." />
+                placeholder="Add a contributor"/>
         </mat-chip-grid>
-        <input [disabled]="disableInputs"
-                [matChipInputFor]="chipGrid1"
-                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                [matChipInputAddOnBlur]="addOnBlur"
-                (matChipInputTokenEnd)="add($event)" />
       </mat-form-field>
 
       <h4>Input is next sibling child of chip grid</h4>
 
-      <mat-form-field>
+      <mat-form-field class="demo-has-chip-list">
         <mat-label>New Contributor...</mat-label>
         <mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
           @for (person of people; track person) {
@@ -215,7 +205,9 @@ <h4>Input is next sibling child of chip grid</h4>
         <input [matChipInputFor]="chipGrid2"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
-               (matChipInputTokenEnd)="add($event)"/>
+               [matChipInputDisabledInteractive]="disabledInteractive"
+               (matChipInputTokenEnd)="add($event)"
+               placeholder="Add a contributor"/>
       </mat-form-field>
 
       <p>
@@ -232,7 +224,7 @@ <h4>Options</h4>
   </mat-card>
 
   <mat-card>
-    <mat-toolbar color="primary">Miscellaneous</mat-toolbar>
+    <mat-card-header>Miscellaneous</mat-card-header>
     <mat-card-content>
       <h4>Stacked</h4>
 

src/dev-app/chips/chips-demo.ts

@@ -17,7 +17,6 @@ import {MatChipEditedEvent, MatChipInputEvent, MatChipsModule} from '@angular/ma
 import {ThemePalette} from '@angular/material/core';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
-import {MatToolbarModule} from '@angular/material/toolbar';
 
 export interface Person {
   name: string;
@@ -40,7 +39,6 @@ export interface DemoColor {
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,
-    MatToolbarModule,
     ReactiveFormsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -54,6 +52,7 @@ export class ChipsDemo {
   listboxesWithAvatar = false;
   disableInputs = false;
   editable = false;
+  disabledInteractive = false;
   message = '';
 
   shirtSizes = [

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

@@ -22,10 +22,10 @@ import {
 } from './index';
 
 describe('MatChipInput', () => {
-  let fixture: ComponentFixture<any>;
+  let fixture: ComponentFixture<TestChipInput>;
   let testChipInput: TestChipInput;
   let inputDebugElement: DebugElement;
-  let inputNativeElement: HTMLElement;
+  let inputNativeElement: HTMLInputElement;
   let chipInputDirective: MatChipInput;
   let dir = 'ltr';
 
@@ -87,10 +87,28 @@ describe('MatChipInput', () => {
       fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
 
-      expect(inputNativeElement.getAttribute('disabled')).toBe('true');
+      expect(inputNativeElement.disabled).toBe(true);
       expect(chipInputDirective.disabled).toBe(true);
     });
 
+    it('should be able to set an input as being disabled and interactive', fakeAsync(() => {
+      fixture.componentInstance.chipGridInstance.disabled = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(inputNativeElement.disabled).toBe(true);
+      expect(inputNativeElement.readOnly).toBe(false);
+      expect(inputNativeElement.hasAttribute('aria-disabled')).toBe(false);
+
+      fixture.componentInstance.disabledInteractive = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+
+      expect(inputNativeElement.disabled).toBe(false);
+      expect(inputNativeElement.readOnly).toBe(true);
+      expect(inputNativeElement.getAttribute('aria-disabled')).toBe('true');
+    }));
+
     it('should be aria-required if the list is required', () => {
       expect(inputNativeElement.hasAttribute('aria-required')).toBe(false);
 
@@ -274,10 +292,12 @@ describe('MatChipInput', () => {
     <mat-form-field>
       <mat-chip-grid #chipGrid [required]="required">
         <mat-chip-row>Hello</mat-chip-row>
-        <input [matChipInputFor]="chipGrid"
-                  [matChipInputAddOnBlur]="addOnBlur"
-                  (matChipInputTokenEnd)="add($event)"
-                  [placeholder]="placeholder" />
+        <input
+          [matChipInputFor]="chipGrid"
+          [matChipInputAddOnBlur]="addOnBlur"
+          [matChipInputDisabledInteractive]="disabledInteractive"
+          (matChipInputTokenEnd)="add($event)"
+          [placeholder]="placeholder" />
       </mat-chip-grid>
     </mat-form-field>
   `,
@@ -288,6 +308,7 @@ class TestChipInput {
   addOnBlur: boolean = false;
   placeholder = '';
   required = false;
+  disabledInteractive = false;
 
   add(_: MatChipInputEvent) {}
 }

src/material/chips/chip-input.ts

@@ -57,10 +57,12 @@ export interface MatChipInputEvent {
     '(focus)': '_focus()',
     '(input)': '_onInput()',
     '[id]': 'id',
-    '[attr.disabled]': 'disabled || null',
+    '[attr.disabled]': 'disabled && !disabledInteractive ? "" : null',
     '[attr.placeholder]': 'placeholder || null',
     '[attr.aria-invalid]': '_chipGrid && _chipGrid.ngControl ? _chipGrid.ngControl.invalid : null',
     '[attr.aria-required]': '_chipGrid && _chipGrid.required || null',
+    '[attr.aria-disabled]': 'disabled && disabledInteractive ? "true" : null',
+    '[attr.readonly]': '_getReadonlyAttribute()',
     '[attr.required]': '_chipGrid && _chipGrid.required || null',
   },
 })
@@ -117,6 +119,14 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
   }
   private _disabled: boolean = false;
 
+  /** Whether the input is readonly. */
+  @Input({transform: booleanAttribute})
+  readonly: boolean = false;
+
+  /** Whether the input should remain interactive when it is disabled. */
+  @Input({alias: 'matChipInputDisabledInteractive', transform: booleanAttribute})
+  disabledInteractive: boolean;
+
   /** Whether the input is empty. */
   get empty(): boolean {
     return !this.inputElement.value;
@@ -133,6 +143,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
 
     this.inputElement = this._elementRef.nativeElement as HTMLInputElement;
     this.separatorKeyCodes = defaultOptions.separatorKeyCodes;
+    this.disabledInteractive = defaultOptions.inputDisabledInteractive ?? false;
 
     if (formField) {
       this.inputElement.classList.add('mat-mdc-form-field-input-control');
@@ -223,4 +234,9 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
   private _isSeparatorKey(event: KeyboardEvent) {
     return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
   }
+
+  /** Gets the value to set on the `readonly` attribute. */
+  protected _getReadonlyAttribute(): string | null {
+    return this.readonly || (this.disabled && this.disabledInteractive) ? 'true' : null;
+  }
 }

src/material/chips/testing/BUILD.bazel

@@ -9,6 +9,9 @@ ts_project(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
+    interop_deps = [
+        "//src/cdk/coercion",
+    ],
     deps = [
         "//src/cdk/testing:testing_rjs",
     ],

src/material/chips/testing/chip-input-harness.spec.ts

@@ -38,6 +38,14 @@ describe('MatChipInputHarness', () => {
     expect(await harnesses[1].isDisabled()).toBe(true);
   });
 
+  it('should get the disabled state when disabledInteractive is enabled', async () => {
+    fixture.componentInstance.disabledInteractive = true;
+    fixture.changeDetectorRef.markForCheck();
+    const harnesses = await loader.getAllHarnesses(MatChipInputHarness);
+    expect(await harnesses[0].isDisabled()).toBe(false);
+    expect(await harnesses[1].isDisabled()).toBe(true);
+  });
+
   it('should get whether the input is required', async () => {
     const harness = await loader.getHarness(MatChipInputHarness);
     expect(await harness.isRequired()).toBe(false);
@@ -91,7 +99,10 @@ describe('MatChipInputHarness', () => {
     </mat-chip-grid>
 
     <mat-chip-grid #grid2>
-      <input [matChipInputFor]="grid2" disabled />
+      <input
+        [matChipInputFor]="grid2"
+        [matChipInputDisabledInteractive]="disabledInteractive"
+        disabled/>
     </mat-chip-grid>
   `,
   imports: [MatChipsModule],
@@ -100,4 +111,5 @@ class ChipInputHarnessTest {
   required = false;
   add = jasmine.createSpy('add spy');
   separatorKeyCodes = [COMMA];
+  disabledInteractive = false;
 }

src/material/chips/testing/chip-input-harness.ts

@@ -12,6 +12,7 @@ import {
   HarnessPredicate,
   TestKey,
 } from '@angular/cdk/testing';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ChipInputHarnessFilters} from './chip-harness-filters';
 
 /** Harness for interacting with a grid's chip input in tests. */
@@ -42,7 +43,14 @@ export class MatChipInputHarness extends ComponentHarness {
 
   /** Whether the input is disabled. */
   async isDisabled(): Promise<boolean> {
-    return (await this.host()).getProperty<boolean>('disabled');
+    const host = await this.host();
+    const disabled = await host.getAttribute('disabled');
+
+    if (disabled !== null) {
+      return coerceBooleanProperty(disabled);
+    }
+
+    return (await host.getAttribute('aria-disabled')) === 'true';
   }
 
   /** Whether the input is required. */

src/material/chips/tokens.ts

@@ -16,6 +16,9 @@ export interface MatChipsDefaultOptions {
 
   /** Whether icon indicators should be hidden for single-selection. */
   hideSingleSelectionIndicator?: boolean;
+
+  /** Whether the chip input should be interactive while disabled by default. */
+  inputDisabledInteractive?: boolean;
 }
 
 /** Injection token to be used to override the default options for the chips module. */