bug(mat-datepicker): Datepicker cannot be closed when animating
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
コントリビューションガイド
調査の方向性
リンクされた StackBlitz の再現手順と Angular Material の datepicker 実装から始め、datepicker のオープン中またはアニメーション中のクローズ動作に焦点を当てます。年をすばやく選択した場合でも datepicker が閉じること(直ちに閉じるか、アニメーション完了後に閉じるかを問わない)が確認でき、関連する datepicker のテストでこの動作がカバーされれば、修正は完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100