bug(Chips Autocomplete): Selecting an option with Enter adds both input text and selected option as chips #32204
Description
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
When using Chips Autocomplete, typing some text into the input and then selecting an option from the autocomplete using Enter results in two chips being added - one for the text entered and one for the selected option.
This does not happen when selecting an option with the mouse, in that case, only the selected option chip is added (as expected).
A workaround found online suggests changing the module import order - import MatAutocompleteModule before MatChipsModule.
This indeed resolves the issue. However, it’s not obvious and could be mentioned in documentation or addressed internally.
Reproduction
StackBlitz link:
Reproducible in Chips Autocomplete examples in Angular Material docs
https://material.angular.dev/components/chips/examples
https://v19.material.angular.dev/components/chips/examples
Steps to reproduce:
- Type some text into the chips input field.
- Use arrow down & enter to select one of the autocomplete options.
Expected Behavior
Selecting an autocomplete option (whether by pressing Enter or clicking with the mouse) should create only one chip for the selected option.
Actual Behavior
Two chips are created: one for the typed text and one for the selected option.
Environment
- Angular: 20.2.0
- CDK/Material: 20.2.0
- Browser(s): Chrome latest
- Operating System (e.g. Windows, macOS, Ubuntu): Mac OS