angular / angular/components

bug(autocomplete): optionSelected and onChangeCallback is called before the animation completes

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

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

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

v16.1.8

### Description

There is a _setValueAndClose method in the MatAutocompleteTrigger class that doesn't take into account the time to complete the animation, this has even been flagged todo but still not fixed. Currently, if we in optionSelected decide to clear the array used in ngFor for mat-option, we will get the array cleared before the panel closes and there will be a corresponding jump

![image](https://github.com/angular/components/assets/73141739/0a03a21b-848b-4ae2-af92-35a50599d2a7)

@crisbeto

### Reproduction

StackBlitz link: https://components-issue-v4ujjj.stackblitz.io
Steps to reproduce:
1. put the focus in the field
2. pick a value from the list

### Expected Behavior

the optionSelected event will be called after the animation is complete, the menu will not jump after the array is cleared

### Actual Behavior

optionSelected event was triggered without waiting for the animation to complete, clearing the array caused the panel to jump

### Environment

- Angular: 16.2.12
- CDK/Material: 16.2.14
- Browser(s): google chrome v126.0.6478.127
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

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 lớp MatAutocompleteTrigger và phương thức _setValueAndClose, sau đó tái hiện hành vi bằng StackBlitz được liên kết bằng cách chọn một tùy chọn trong khi xóa mảng mat-option ngFor trong optionSelected. So sánh thời điểm của các sự kiện với animation của panel autocomplete; hoàn tất khi optionSelected và onChangeCallback không khiến panel bị giật trước khi animation hoàn tấ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ó
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
42/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.