[pickers][DatePicker] Toggle date selection when same date is clicked

[ReaganS94]

Summary

I am currently utilizing the StaticDatePicker component to create an interface where users can select and highlight multiple dates. However, I've encountered a limitation with the onChange event handler; it does not trigger when the same date is clicked consecutively. This behavior limits the ability to toggle a date's selection without first selecting a different date.

Current Behavior:

When a user selects a date, it becomes highlighted. However, if the user clicks the same date again with the intention of deselecting it, the onChange event does not fire, and thus the date remains selected. To deselect, one has to choose a different date before toggling the original one.

Desired Feature:

It would be highly beneficial for the StaticDatePicker to have an enhanced toggle functionality. Specifically, when a date is clicked, if it's already selected, a subsequent click should deselect it, ideally triggering the onChange event with a null value or similar indicator.

Suggested Implementation:

Ideally, the onChange handler could be enhanced to detect a click on the currently selected date and respond by clearing that selection. This could be an optional behavior controlled by a prop, maintaining backward compatibility for users who rely on the current behavior.

Examples

No response

Motivation

This feature would significantly improve the user experience in scenarios where users need to select multiple non-consecutive dates and might change their selections frequently. It would allow for a more intuitive interaction pattern, akin to how users commonly expect toggleable options to behave.

Search keywords: StaticDatePicker, DatePicker, Date

[michelengelen]

Technically this would be possible when providing a function to the onClick method on the day slot:

<StaticDatePicker
  defaultValue={dayjs('2022-04-17')}
  onChange={(...params) => console.log('change', params)}
  slotProps={{
    day: {
      onClick: (...params) => console.log('day click', params),
    },
  }}
/>

Although this feels a bit clunky tbh. @LukasTy should we keep this on the board for discussion purposes?

[LukasTy]

@michelengelen your suggestion will hardly help, because the onClick callback does not receive anything to easily identify the clicked day. We can indeed add this issue to the board and discuss possible solutions.

I see a couple of possible options:

• fire on change even when the changed value is equal to the previously selected (that's a BC) and let the user handle it on their end - if they want to toggle the value, they'd need to control the value and compare it with previously selected;
• add a prop (as suggested) to fire on change with the "same" (when value equals previously selected) value;