From ebcea447d4416fde2e2778a56f85272f732749ac Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 30 Nov 2017 21:42:00 +0100
Subject: [PATCH] fix(autocomplete): not implementing setDisabledState from
 ControlValueAccessor

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 |  8 ++++++
 src/lib/autocomplete/autocomplete.spec.ts    | 27 ++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 1e328390e6be..fbc743ba0ba0 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/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;
 
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index ecced8afe523..21d7161b3458 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/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();
+}