fix(autocomplete): not implementing setDisabledState from ControlValu…

…eAccessor

Fixes plain inputs (without a `matInput`) that has a `formControl` and an autocomplete attached not being disabled via `FormControl.disable`. The issue was due to the `MatAutocompleteTrigger` not implementing the `setDisableState`. The current implementation is in line with the approach in the `DefaultValueAccessor`.

Fixes #8735.

src/lib/autocomplete/autocomplete-trigger.ts

@@ -267,6 +267,14 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     this._onTouched = fn;
   }
 
+  /**
+   * Disables the input. Implemented as a part of `ControlValueAccessor`.
+   * @param isDisabled Whether the component should be disabled.
+   */
+  setDisabledState(isDisabled: boolean) {
+    this._element.nativeElement.disabled = isDisabled;
+  }
+
   _handleKeydown(event: KeyboardEvent): void {
     const keyCode = event.keyCode;
 

src/lib/autocomplete/autocomplete.spec.ts

@@ -67,6 +67,7 @@ describe('MatAutocomplete', () => {
         AutocompleteWithFormsAndNonfloatingLabel,
         AutocompleteWithGroups,
         AutocompleteWithSelectEvent,
+        PlainAutocompleteInputWithFormControl,
       ],
       providers: [
         {provide: Directionality, useFactory: () => ({value: dir})},
@@ -608,6 +609,21 @@ describe('MatAutocomplete', () => {
           .toBe(true, `Expected control to become touched on blur.`);
     });
 
+    it('should disable the input when used with a value accessor and without `matInput`', () => {
+      fixture.destroy();
+
+      const plainFixture = TestBed.createComponent(PlainAutocompleteInputWithFormControl);
+      plainFixture.detectChanges();
+      input = plainFixture.nativeElement.querySelector('input');
+
+      expect(input.disabled).toBe(false);
+
+      plainFixture.componentInstance.formControl.disable();
+      plainFixture.detectChanges();
+
+      expect(input.disabled).toBe(true);
+    });
+
   });
 
   describe('keyboard events', () => {
@@ -1948,3 +1964,14 @@ class AutocompleteWithSelectEvent {
   @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
   @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete;
 }
+
+
+@Component({
+  template: `
+    <input [formControl]="formControl" [matAutocomplete]="auto"/>
+    <mat-autocomplete #auto="matAutocomplete"></mat-autocomplete>
+  `
+})
+export class PlainAutocompleteInputWithFormControl {
+  formControl = new FormControl();
+}