angular / angular/components

bug(mat-datepicker): Datepicker cannot be closed when animating

Offen
#27,920 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/datepicker P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion und der Angular Material datepicker-Implementierung und konzentriere dich auf das Schließverhalten, während der datepicker geöffnet wird oder animiert. Die Behebung ist abgeschlossen, wenn die schnelle Auswahl eines Jahres den datepicker weiterhin schließt, entweder sofort oder nach Abschluss der Animation, und dieses Verhalten durch die relevanten datepicker-Tests abgedeckt ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.