angular
bug(MatAutocomplete): MatAutocomplete + FormControl does not clear input correctly after option selection
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
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) or this.fruitCtrl.setValue(''). Instead, the previously typed text remains visible, but if you subscribe to the FormControl.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:
- See example https://material.angular.io/components/chips/examples#chips-autocomplete
- Remove the nativeElement reference
- Input text remains visible despite the FormControl instance correctly emitting the new value, creating an inconsistent state
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
- Angular: n/a (internal stable version http://go/ng-cli)
- CDK/Material: n/a
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
