bug(mat chips): mat-chips with mat-autocomplete and input combined, adds an extra chip when selecting from list

[elazarza]

Reproduction

stackblitz demo:
https://components-issue-eyb6jo.stackblitz.io

Steps to reproduce:

1. create mat chips as shown in the example section in the docs
2. use the autocomplete example
3. add the Input example neccessary parts - [matChipInputAddOnBlur]="addOnBlur" in template and addBlur= true in TS
4. start typing one of the items in the autocomplete, i.e: Apple - start typing Ap, then click Apple

Expected Behavior

What behavior were you expecting to see?

only the item Apple is added to the chips list and the input is cleared

Actual Behavior

What behavior did you actually see?

both "Ap" that is the input value at the moment and "Apple" that is the clicked item are added to the chips list

Environment

• Angular: 8.2.3
• CDK/Material: cdk - 7.3.7 material - 7.0.1
• Browser(s): tested on Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[mariojsnunes]

Same issue here, I'm on
Material/CDK: 9.2.0
Angular 9.1.0

[mariojsnunes]

I upgraded to @angular/material 10.0.1 and I still have the the same issue.
Also happening with matChipInputAddOnBlur set to false.
Happens if click or if you press enter with the option selected.

[mariojsnunes]

Found a workaround that involves storing the autocomplete active option state.

(optionActivated)="activated($event)"

activated(event: MatAutocompleteActivatedEvent) { this.active = event.option?.value; }

Then validate if there is an active option before adding the chip.

[elazarza]

@mariojsnunes thanks man i'll check it out and see if it works for me, do you check for an active blur event option or click event option?

[mariojsnunes]

@elazarza I didn't need any blur event logic.
The (optionActivated) event also triggers when it is deselected (option is null)

[aeslinger0]

Duplicate of #13574

[elazarza]

Duplicate of #13574

seems to be it.
working solution by "zzzaaa":

#19279 (comment)

[crisbeto]

Closing as a duplicate of #13574.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}