angular / angular/components

bug(Chip Input): matChipInputSeparatorKeyCodes won't recognize ";" and doesn't recognize pasted text

Offen
#21,217 15 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/chips feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Reproduction

Use StackBlitz to reproduce your issue:
[https://stackblitz.com/edit/angular-cr3nwj?file=src/app/chips-autocomplete-example.ts](https://stackblitz.com/edit/angular-cr3nwj?file=src/app/chips-autocomplete-example.ts)

Steps to reproduce:
1. Using a mat-form-field with mat-chip-list and an input.
2. Declare the [matChipInputSeparatorKeyCodes]="separatorKeysCodes", with separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON, 188];
3. Use a ";" in the input to trigger the chipEnd event. But i won't trigger. Neither by pressing the semicolon (EU Keyboard keys: shift + ,")
4. The input wont trigger the chipEnd after pasting text into the input and doesnt check for the separatorKeys in the pasted text.


#### Expected Behavior

The chipEnd event should be triggered after typing the Semicolon into to the input.
Also should pasted text be regnozed and processed based on the declared separatorKeys.
For example:
separatorKeys [COMMA]
Pasted text: "name1, name2, name3"
After pasting chipEnd event triggers and created 3 chips: "name1", "name2", "name3"

#### Actual Behavior
Semicolon doesn't trigger any event and will just display in the input.
Pasted text also doesn't trigger any event and will just display in the input.

#### Environment

- Angular: 11.0.0
- CDK/Material: 11.0.0
- Browser(s): Google Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne beim StackBlitz-Einstiegspunkt unter src/app/chips-autocomplete-example.ts und dem mat-chip-list-Eingabefeld, das mit matChipInputSeparatorKeyCodes konfiguriert ist. Verfolge, wie chipEnd bei Tastatureingaben und eingefügtem Text ausgelöst wird. Als abgeschlossen gilt es, wenn die Eingabe eines Semikolons chipEnd auslöst und eingefügter, durch Kommas getrennter Text separate Chips erstellt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.