angular / angular/components

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

Đang mở
#21,217 15 bình luận 2 reaction 0 người được giao Xem trên GitHub
area: material/chips feature P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với entry point của StackBlitz tại src/app/chips-autocomplete-example.ts và input mat-chip-list được cấu hình bằng matChipInputSeparatorKeyCodes. Theo dõi cách chipEnd được kích hoạt đối với dữ liệu nhập từ bàn phím và văn bản được dán. Hoàn tất khi việc nhập dấu chấm phẩy kích hoạt chipEnd và văn bản được dán, phân tách bằng dấu phẩy, tạo ra các chip riêng biệt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.