Skip to content

Commit 93bda3c

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 d7d995d commit 93bda3c

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
@@ -596,6 +596,22 @@ describe('MatAutocomplete', () => {
596596
.toBe(true, `Expected control to become touched on blur.`);
597597
});
598598

599+
it('should disable the input when used with a value accessor and without `matInput`', () => {
600+
fixture.destroy();
601+
TestBed.resetTestingModule();
602+
603+
const plainFixture = createComponent(PlainAutocompleteInputWithFormControl);
604+
plainFixture.detectChanges();
605+
input = plainFixture.nativeElement.querySelector('input');
606+
607+
expect(input.disabled).toBe(false);
608+
609+
plainFixture.componentInstance.formControl.disable();
610+
plainFixture.detectChanges();
611+
612+
expect(input.disabled).toBe(true);
613+
});
614+
599615
});
600616

601617
describe('keyboard events', () => {
@@ -1906,3 +1922,14 @@ class AutocompleteWithSelectEvent {
19061922
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
19071923
@ViewChild(MatAutocomplete) autocomplete: MatAutocomplete;
19081924
}
1925+
1926+
1927+
@Component({
1928+
template: `
1929+
<input [formControl]="formControl" [matAutocomplete]="auto"/>
1930+
<mat-autocomplete #auto="matAutocomplete"></mat-autocomplete>
1931+
`
1932+
})
1933+
export class PlainAutocompleteInputWithFormControl {
1934+
formControl = new FormControl();
1935+
}

0 commit comments

Comments
 (0)