angular / angular/components

bug(chips-autocomplete): Signal with two-way binding on an autocomplete with chips is not updating input

Đang mở
#29,388 6 bình luận 1 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

This bug occurred when implementing an autocomplete with multi-selection. For this, I used a **mat-autocomplete** on a **mat-input**, and a **mat-chip-grid** to display the values. To handle the input state, there is a signal with two-way binding using [(ngModel)].

In this particular case, it seems that updating the signal linked to the ngModel does not update the input value.

### Reproduction

**StackBlitz link**: https://material.angular.io/components/chips/overview#chips-autocomplete (the stackblitz from the official documentation showcase this bug)

**Steps to reproduce**:
1. Type the letter 'a'
2. Click on 'Apple' to add the apple to the multi-selection
3. Despite the signal being set to an empty string, the input is still displaying 'a'

_Note: the signal state is correctly used to filter, which means that clicking on the input will display all values (despite the displayed 'a', which should supposedly be used to filter). For example, if you change the code to do `this.currentFruit.set('apple')` and reproduce this bug again, only the Apple element will be displayed when clicking a second time on the autocomplete (despite having only 'a' displayed)_

### Expected Behavior

After clicking on an option in a chips-autocomplete, the input should reflect the signal state correctly.

### Actual Behavior

After clicking on an option in a chips-autocomplete, the input is not updated according to the signal state.

### Environment

- Angular: 18.0.1
- CDK/Material: 18.0.6
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu, probably? (this comes from the Stackblitz)

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

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

Hướng nghiên cứu

Start with the chips-autocomplete example and its linked StackBlitz reproduction in the Angular Material chips documentation. Reproduce the issue by typing “a” and selecting Apple, then trace the two-way ngModel binding between the signal and the autocomplete input. Done means the input displays the signal’s updated empty-string state after selection.

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.