bug(mat-datepicker): Datepicker cannot be closed when animating
- 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
Introduced in https://github.com/angular/components/pull/25843
### Description
We have implemented a year-only-picker using mat-datepicker in listening to the (yearSelected) event and then closing the datepicker manually. However, if the user selects a new year fast enough the datepicker is still opening and animating (_isAnimating is true) and therefore the datepicker is not closed. This was introduced in https://github.com/angular/components/pull/25843
The problem is that the `_isAnimating` property and the `_animationDone` subject are both not exposed through public API so we cannot wait for the animation to be finished to close the picker. However, exposing it would be not a good solution as this would require us to have knowledge of the internals of the component to implement the solution. Rather, the datepicker should be fixed so the close event is scheduled for after when the animation is finished.
Thanks!
### Reproduction
StackBlitz link:
It simulates opening the datepicker and then closing it very fast through setTimeout to visualize the issue.
https://stackblitz.com/edit/datepicker-bug-material
### Expected Behavior
Either datepicker will close even if animating or datepicker will be scheduled for closing so it closes at the end of the animation.
### Actual Behavior
Datepicker is not closing while animating
### Environment
- Angular: 16.2.8
- CDK/Material: 16.2.7
- Browser(s): Chrome Version 117.0.5938.149 - all browsers.
- Operating System (e.g. Windows, macOS, Ubuntu): macOs 13.2.1 - all operating systems
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à phần triển khai datepicker của Angular Material, tập trung vào hành vi đóng trong khi datepicker đang mở hoặc đang chạy animation. Bản sửa được hoàn tất khi việc chọn nhanh một năm vẫn đóng datepicker, ngay lập tức hoặc sau khi animation hoàn tất, và hành vi này được bao phủ bởi các bài kiểm thử datepicker liên quan.
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