diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 31a69af404b..01a2a4a4f0a 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 4743fcd1f22..1dab9ede7d6 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -596,6 +596,22 @@ 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(); + TestBed.resetTestingModule(); + + const plainFixture = 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', () => { @@ -1923,3 +1939,14 @@ class AutocompleteWithSelectEvent { @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete; } + + +@Component({ + template: ` + + + ` +}) +export class PlainAutocompleteInputWithFormControl { + formControl = new FormControl(); +}