Skip to content

Commit ebcea44

Browse files
committed
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.
1 parent 5210b3e commit ebcea44

File tree

2 files changed

+35
-0
lines changed

2 files changed

+35
-0
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,14 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
267267
this._onTouched = fn;
268268
}
269269

270+
/**
271+
* Disables the input. Implemented as a part of `ControlValueAccessor`.
272+
* @param isDisabled Whether the component should be disabled.
273+
*/
274+
setDisabledState(isDisabled: boolean) {
275+
this._element.nativeElement.disabled = isDisabled;
276+
}
277+
270278
_handleKeydown(event: KeyboardEvent): void {
271279
const keyCode = event.keyCode;
272280

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ describe('MatAutocomplete', () => {
6767
AutocompleteWithFormsAndNonfloatingLabel,
6868
AutocompleteWithGroups,
6969
AutocompleteWithSelectEvent,
70+
PlainAutocompleteInputWithFormControl,
7071
],
7172
providers: [
7273
{provide: Directionality, useFactory: () => ({value: dir})},
@@ -608,6 +609,21 @@ describe('MatAutocomplete', () => {
608609
.toBe(true, `Expected control to become touched on blur.`);
609610
});
610611

612+
it('should disable the input when used with a value accessor and without `matInput`', () => {
613+
fixture.destroy();
614+
615+
const plainFixture = TestBed.createComponent(PlainAutocompleteInputWithFormControl);
616+
plainFixture.detectChanges();
617+
input = plainFixture.nativeElement.querySelector('input');
618+
619+
expect(input.disabled).toBe(false);
620+
621+
plainFixture.componentInstance.formControl.disable();
622+
plainFixture.detectChanges();
623+
624+
expect(input.disabled).toBe(true);
625+
});
626+
611627
});
612628

613629
describe('keyboard events', () => {
@@ -1948,3 +1964,14 @@ class AutocompleteWithSelectEvent {
19481964
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
19491965
@ViewChild(MatAutocomplete) autocomplete: MatAutocomplete;
19501966
}
1967+
1968+
1969+
@Component({
1970+
template: `
1971+
<input [formControl]="formControl" [matAutocomplete]="auto"/>
1972+
<mat-autocomplete #auto="matAutocomplete"></mat-autocomplete>
1973+
`
1974+
})
1975+
export class PlainAutocompleteInputWithFormControl {
1976+
formControl = new FormControl();
1977+
}

0 commit comments

Comments
 (0)