angular / angular/components

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

Aperta
#27,920 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
area: material/datepicker P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione StackBlitz collegata e l’implementazione del datepicker di Angular Material, concentrandoti sul comportamento di chiusura mentre il datepicker si sta aprendo o è in animazione. La correzione è completa quando la selezione rapida di un anno continua a chiudere il datepicker, immediatamente o al termine dell’animazione, e il comportamento è coperto dai test pertinenti del datepicker.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.