angular / angular/components

bug(CHIPS AUTOCOMPLETE): chips autocomplete won't emit optionSelected if matChipInputAddOnBlur is set to true

Đang mở
#24,855 1 bình luận 3 reaction 0 người được giao Xem trên GitHub
area: material/chips 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ả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When creating a mat autocomplete with chips the selectedOption event is not fired if the input associated with the chip-list has the [matChipInputAddOnBlur] property set as true and has a value typed in.

if you set the matChipInputAddOnBlur to false it will work perfectly, but I also need it to fire on blur to validate or insert the inputted value.

### Reproduction

Steps to reproduce:
1. visit https://stackblitz.com/edit/angular-rmuzjg-t8dcn6?file=src/app/chips-autocomplete-example.ts
2. type "a" into the input
3. click orange (or any other option except apple)

there is a console.log('selected') in the function associated with the (optionSelected) event, it won't be fired.

### Expected Behavior

The option clicked (orange) should be added to the chips.

The autocomplete's optionSelected event should be fired.

### Actual Behavior

a chip with the value inputted is added to the chips but the option clicked is not.

the autocomplete's optionSelected event is not fired.

### Environment

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

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 bản tái hiện StackBlitz được liên kết và theo dõi tương tác giữa hành vi matChipInputAddOnBlur của ô nhập chip và sự kiện optionSelected của tính năng tự động hoàn thành. Xác minh trường hợp nhập văn bản rồi nhấp vào orange, sau đó xác nhận rằng tùy chọn được nhấp sẽ được thêm vào và optionSelected được kích hoạt, trong khi giá trị đã nhập được xử lý như mong đợi.

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ó
3/5
Thời gian dự kiến
1-2 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.