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 b9139a06ce99..78d78bde42d9 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', () => { @@ -1906,3 +1922,14 @@ class AutocompleteWithSelectEvent { @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete; } + + +@Component({ + template: ` + + + ` +}) +export class PlainAutocompleteInputWithFormControl { + formControl = new FormControl(); +}