Components: bug([MatChipInput]): when AddOnBlur + select option by click will add 2 chips

[keatkeat87]

Reproduction

https://stackblitz.com/edit/angular-rd38q1?file=src/app/chips-autocomplete-example.html

Steps to reproduce:

Expected Behavior

only the option will become chip

Actual Behavior

the text also become chip

remark:
I think this is because of the input blur event is fire before option click event.
if use keyboard up down enter, then everything work fine.

Environment

Angular CLI: 9.1.4
Node: 12.16.1
OS: win32 x64

Angular: 9.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.4
@angular-devkit/build-angular 0.901.4
@angular-devkit/build-ng-packagr 0.901.4
@angular-devkit/build-optimizer 0.901.4
@angular-devkit/build-webpack 0.901.4
@angular-devkit/core 9.1.4
@angular-devkit/schematics 9.1.4
@angular/cdk 9.2.1
@angular/material 9.2.1
@angular/material-moment-adapter 9.2.1
@ngtools/webpack 9.1.4
@schematics/angular 9.1.4
@schematics/update 0.901.4
ng-packagr 9.0.0
rxjs 6.5.5
typescript 3.7.5
webpack 4.42.0

[alexfangmann]

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
}

[zzzaaa]

Repeated for me.
https://stackblitz.com/edit/angular-rd38q1-jxbjjb?file=src/app/chips-autocomplete-example.ts
Even with provided solution by @alexfangmann .

Steps to repeat:

1. Type "a" to search string.
2. Click and hold mouse 1 on "Apple" option (add() event fired). You should see only "A" in chip list at this time.
3. Release a mouse 1. Only after that "selected()" event fired and "Apple" added to the list.

I tried a way with bufferTime(), but user can hold mouse button much more. Also we can try to create temporary buffer between mouseDown and mouseUp. Anyway it's a dirty solution :(

At lest MatChipInputEvent should content the event (MouseDown, keypressed). Currently it's just contain value and element.

[alexfangmann]

hi @zzzaaa ,
i found something. If you set the property
"matChipInputAddOnBlur="false" on the input then all works and you don´t need my workaround. Now only a chip is added on enter or komma, but i think you would the add on blur feature^^

[zzzaaa]

@alexfangmann yeah. This way is works.
We can emulate matChipInputAddOnBlur self.

I added (blur)=addOnBlur($event) to the input and disabled matChipInputAddOnBlur
Click on mat-input should be ignored.

my implementation:

  addOnBlur(event: FocusEvent) {
    const target: HTMLElement = event.relatedTarget as HTMLElement;
    if (!target || target.tagName !== 'MAT-OPTION') {
      const matChipEvent: MatChipInputEvent = {input: this.fruitInput.nativeElement, value : this.fruitInput.nativeElement.value};
      this.add(matChipEvent);
    }
  }

example https://stackblitz.com/edit/angular-rd38q1-jxbjjb?file=src%2Fapp%2Fchips-autocomplete-example.ts

[jelbourn]

Looks like this is resolved.

[angular-automatic-lock-bot[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._}