Components: mat-chip with autocomplete can add unwanted chips

Created on 11 Oct 2018 · 5Comments · Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Typing a partial search term, using arrow keys to highlight option on autocomplete list, and pressing Enter should add only the selected chip.

What is the current behavior?

Intermittently, two chips are added. One for the selected value and one with the partial search term.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

I tried creating a StackBlitz to reproduce it, but couldn't get it to reproduce. Then I realized that it's a race condition causing it. More below...

What is the use-case or motivation for changing an existing behavior?

Addtional chip is unexpected behavior

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular/Material >= v6 for sure.

Is there anything else we should know?

The problem happens depending on the order that event handlers get executed. The code from the official example expects the optionSelected event of the mat-autocomplete to execute first (which clears out the input box), then for the matChipInputTokenEnd event of the input to execute (which avoids adding a chip if it's blank).

For whatever reason, using the exact same code and framework version in my app, the event handlers execute in the opposite order. Since the input hasn't been cleared yet, the search term gets added as an unexpected chip. Then the option from the autocomplete gets added as the expected chip.

P4 materiaautocomplete materiachips

Source

aeslinger0

👍8

Most helpful comment

Seconding this issue, I have noticed the same behavior here.

I did get Stackblitz to seemingly reproduce this issue here:
https://stackblitz.com/edit/angular-yxkarc?embed=1&file=src/app/app.component.ts

Essentially what you say is the case, it will add both the currently selected value in the dropdown list as well as the partial search term you have in the autocomplete bar.

deadlymustard on 12 Oct 2018

👍4

All 5 comments

Seconding this issue, I have noticed the same behavior here.

I did get Stackblitz to seemingly reproduce this issue here:
https://stackblitz.com/edit/angular-yxkarc?embed=1&file=src/app/app.component.ts

Essentially what you say is the case, it will add both the currently selected value in the dropdown list as well as the partial search term you have in the autocomplete bar.

deadlymustard on 12 Oct 2018

👍4

@deadlymustard, I can reproduce it using your link. What did you change to get it to happen?

aeslinger0 on 12 Oct 2018

I generated a project locally with the latest version of Angular CLI using the default autocomplete example on the Angular docs (https://material.angular.io/components/chips/overview) and copied and pasted it over into a fresh Stackblitz project.

deadlymustard on 12 Oct 2018

You can fix this issue when you check the mat list for selected options.
In the selected event you have to deselect the option.
Only a workaround ^^

add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our fruit
if ((value || '').trim()&&
// only add when no option selected
!this.matAutocomplete.options.some((x) => x.selected === true)) {
this.fruits.push(value.trim());
}
// Reset the input value
if (input) {
input.value = '';
}
this.fruitCtrl.setValue(null);
}

selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push(event.option.viewValue);
this.fruitInput.nativeElement.value = '';
this.fruitCtrl.setValue(null);
event.option.deselect(); // reset selected option
}