angular / angular/components

bug(CHIPS): chip-listbox is setting formControl as undefined after unselection - inconsistency with .setValue(null)

Đang mở
#32,084 1 bình luận 0 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ả

### Description

### Inconsistent behaviour between chip unselection vs. unselecting the chip by setting null value as formControl

When I want to programatically unselect a chip within a formGroup I can not setValue(undefined) only setValue(null).
I find that the behaviour is inconsistent and I understand why the initial value is undefined in case nothing was put onto the component. But after unselection I think it would be more rational to have it set up as null. Or preferably having null always as a default value within formGroup.

- I find this behaviour inconsistent and in case that I need to programatically unselect chipbox, then I need to map the final undefined value to null to have it correctly set in my project

Image

### Reproduction

[StackBlitz link: ](https://stackblitz.com/edit/components-issue-starter-wrxvkjqq?file=src%2Fmain.ts)
Steps to reproduce:
1. Select one of the three chips, for example 'Large'
2. Click on the button set as null
3. This works as expected, and the chips has value null.
4. Try to click on Large again
5. Unselect the selection by clicking on 'Large' again

You receive undefined

Image

Image

### Expected Behavior

Expected behaviour is to have either always undefined or null, or be able to set undefined programatically.
But preferably null over undefined

### Actual Behavior

Inconsistent behaviour between `myControl.setValue(null) ` - which is unselecting chip from the component
And the actual clicking on the selected chip which it makes unselected but automatically set value as undefined

### 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à so sánh các giá trị của form control của chip-listbox sau khi gọi setValue(null) và sau khi nhấp vào chip đã chọn để bỏ chọn. Được xem là hoàn tất khi component nhất quán sử dụng giá trị null hoặc undefined đã thống nhất trong cả hai đường đ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
35/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.