angular / angular/components

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

オープン
#21,217 コメント 15 件 リアクション 2 件 担当者 0 名 GitHub で見る
area: material/chips feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### 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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

src/app/chips-autocomplete-example.ts の StackBlitz エントリーポイントと、matChipInputSeparatorKeyCodes で構成された mat-chip-list の input から始めます。キーボード入力と貼り付けられたテキストに対して chipEnd がどのようにトリガーされるかを追跡します。セミコロンの入力で chipEnd がトリガーされ、カンマ区切りで貼り付けられたテキストから個別のチップが作成されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。