angular / angular/components

bug([MatChipInput]): matChipInputAddOnBlur: true + selecting option by click inserts 2 chips

Aperta
#28,173 1 commento 6 reazioni 0 assegnatari Vedi su GitHub
area: material/autocomplete area: material/chips P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### Description

This is an intentional duplicate of https://github.com/angular/components/issues/19279, because it's been closed with a workaround that no longer works with the new Angular Material components (v15+).

The workaround was to set `matChipInputAddOnBlur` to `false` and handle the `(blur)` event on our own while ignoring the one that is related (`relatedTarget`) to `mat-option` element, however, now, clicking the `mat-option` will fire the `FocusEvent` with `relatedTarget: null`.

My updated (and working) workaround looks like this:
```
addOnBlur(event: FocusEvent) {
const target: HTMLElement = event.relatedTarget as HTMLElement;

if (!target) {
return;
}

this.addCustomChip(this.itemInput.nativeElement.value); // or manually create MatChipInputEvent etc...
}
```

However, the original issue is still there and it shouldn't require any workaround in the first place.

### Reproduction

https://stackblitz.com/edit/angular-rd38q1-b74xmz?file=src%2Fapp%2Fchips-autocomplete-example.ts,package.json,src%2Fapp%2Fchips-autocomplete-example.html,src%2Fmain.ts
![81319947-011e3200-90c3-11ea-8cd3-4556ec9ff622](https://github.com/angular/components/assets/32791888/69bf1bf5-5da3-49ae-b633-1c7a67791e88)

### Expected Behavior

Only the selected option should become a chip

### Actual Behavior

The input text also becomes a chip

### Environment

- Angular: v15+
- CDK/Material: v15+
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione StackBlitz collegata, in particolare src/app/chips-autocomplete-example.ts, src/app/chips-autocomplete-example.html e package.json, e riproduci il flusso di selezione tramite clic in Chrome. Il lavoro è completato quando la selezione di una mat-option aggiunge solo quell'opzione come chip e non aggiunge anche il testo immesso.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
55/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.