Open edsanchez-google opened 1 year ago
I'd like to add some weight on this because I have a very similar problem. I also want to use the FormControl.setValue
function to set the text of an autocomplete element - an actual value instead of clearing it.
This unfortunately does not work and I have to jump through hoops to get at the native input element, which is of course counter to the spirit of a framework like Angular.
Previous bug reports have always gone stale, unfortunately: #22985, #22914, #18286 (explained poorly but probably the same). This is very much an issue...
Same for me.
To workaround this issue, I use MatChipInput#clear
method instead of direct use of nativeElement
. IMO it's less "tricky".
// ...
@ViewChild('fruitChipInput') fruitChipInput: MatChipInput;
// ...
selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push(event.option.viewValue);
this.fruitChipInput.clear();
this.fruitCtrl.setValue(null);
}
In Angular 17, still got the issue. Any update on that ?
selectUser(user: User) {
this.selectedUser.set(user);
this.form.controls.name.setValue("");
}
The input is not cleared.
Is this a regression?
The previous version in which this bug was not present was
No response
Description
See example: https://material.angular.io/components/chips/examples#chips-autocomplete
In this example, after selecting an autocomplete option, we want to create a new chip and clear the typed text in the input element. The input is bound to a FormControl instance, so it should be possible to clear the input by simply calling
this.fruitCtrl.setValue(null)
orthis.fruitCtrl.setValue('')
. Instead, the previously typed text remains visible, but if you subscribe to theFormControl.valueChanges
property you will see the new empty value emitted correctly.The example works around this issue by accessing the native input element and updating the value directly.
Reproduction
Steps to reproduce:
Expected Behavior
It should be enough to just update the FormControl to ensure the input element has the correct value set.
Actual Behavior
The input element is left in an inconsistent state unless the user manually updates the native element's value directly.
Environment