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

[jbchr]

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

[wartab]

We also had this issue and if you're okay with a more hacky approach until this is addressed, we use

this.datePicker["_destroyOverlay"](); 

instead of

this.datePicker.close(); 

This bypasses the animation entirely. Maybe it would be good to expose this method or a similar directly?

Wasn't quite the same use case as you, but we had the issue that we wanted to close the datepicker after a month is selected, because we didn't care about the day. But since the datepicker became animated, the transition would look ugly and show the day-of-the-month calendar for a few moments.