mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(autocomplete): not implementing setDisabledState from ControlValueAccessor (#8746)
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.
This commit is contained in:
committed by
Andrew Seguin
parent
c7e2d4ec73
commit
92bc503be6
@@ -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;
|
||||
|
||||
|
||||
@@ -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: `
|
||||
<input [formControl]="formControl" [matAutocomplete]="auto"/>
|
||||
<mat-autocomplete #auto="matAutocomplete"></mat-autocomplete>
|
||||
`
|
||||
})
|
||||
export class PlainAutocompleteInputWithFormControl {
|
||||
formControl = new FormControl();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user