bug(material/datepicker): There is no way to deselect the selected date(s) while a calendar is open

[pranavirabatti]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have a reset button in the date range picker, but when I try to reset the selected dates using the reset button, it resets the models but not the selection in the date range picker widget.

Reproduction

StackBlitz link: https://stackblitz.com/edit/4wfp1v-mbnz3s?file=src%2Fexample%2Fdate-range-picker-overview-example.html

Steps to reproduce:

1. Open the date range picker widget.
2. Select a date range.
3. Click the reset button.
4. Observe that while the underlying models are reset, the date selection in the date range picker widget remains unchanged.

Expected Behavior

I was expecting the date range picker widget to completely clear the selected dates and reset to its default state when the reset button is clicked, along with resetting the underlying models.

Actual Behavior

The actual behavior is that when the reset button is clicked, the underlying models are reset, but the selected dates in the date range picker widget remain highlighted and do not clear.

Environment

• Angular: ^19.0.0-next.2
• CDK/Material: ^19.0.0-next.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows and Ubuntu

[imerljak]

Did some investigation on this and found the reason why resetting the FormControl won't clear the DatePickerContent.

components/src/material/datepicker/datepicker-base.ts

Line 298 in 5ad133d

this._model = portal ? this._globalModel.clone() : this._globalModel;

When DatePickerContent is assigned a TemplatePortal for actions, it clones the model to allow cancelling, otherwise any changes on the input (e.g: selecting a date) will be immediately reflected to the FormControl.

I am not sure how we could fix this without causing more issues since there's no way (other than inspecting the input value for nulls) to determine if we're doing a reset, or assigning a new value, but even that could lead to false positives.

If FormControl would expose an event for when reset() is invoked, we could wire it up.

I am open for suggestions.