angular / angular/components

bug(mat-chip): mat-chip does not react to [selected] binding when the mat-chip-list also contains a formControl (e.g.) official autocomplete example

Đang mở
#21,999 5 bình luận 2 reaction 0 người được giao Xem trên GitHub
area: material/autocomplete 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ả

#### Reproduction

This example is copied directly from the official "Chips Autocomplete" example ([https://material.angular.io/components/chips/examples]). I have just stripped some of the unnecessary bits for a minimal example.

The example shows 3 copies of same mat-chip-list showing how mat-chips do not react to [selected] binding when a mat-input with either [formControl] or [matAutocomplete] bindings are included in the mat-chip-list.

All the existing chips should be selected in all copies. The only difference between the 3 is what bindings are included in the

https://components-issue-y2hda6.stackblitz.io

Steps to reproduce:
1. Create a mat-chip-list with mat-chips that have a [selected] binding (or just static flag set)
2. Add a with either [matAutocomplete] or [formControl]
3. The mat-chips no longer reflect their "selected" css styles (although appear to be internally in selected state)

#### Expected Behavior

For all chips to be selected in all copies

#### Actual Behavior

Presence of [formControl] or [matAutocomplete] prevents css styles being applied to selected chips

#### Environment

- Angular: 11.1.1
- All OS/Browser

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 nó với ví dụ Chips Autocomplete chính thức. Kiểm tra hành vi của mat-chip-list và mat-chip khi đầu vào sử dụng [formControl] hoặc [matAutocomplete]. Hoàn thành khi các chip hiện có áp dụng các kiểu CSS khi được chọn trong cả ba trường hợp được tái hiện.

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
Đặc tả 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.