[DesktopDatePicker] does not allow user to pick the same date (in diff year) when it is already selected in another year

[asharafshahi]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I have a DesktopDatePicker in a form and after a user selects a certain date (e.g. 04/21/2022) and reopens the picker, they naturally cannot pick the exact same day again since it's already selected. However, even after switching the year (e.g. 2021), the current date of 04/21 still has the dark blue outline and cannot be picked.

Expected behavior 🤔

The user should be able to switch years and select the same date in a previous year.

Steps to reproduce 🕹

Steps:

1. Click the calendar icon and pick any date first (calendar auto closes and date shows in the textbox)
2. Click the calendar icon again to open the picker.
3. Click the year at the top left corner and change to a different year
4. Click the same date as in step on in the new year.
5. The calendar will not accept the new change and will not close.

Sample implemented here:

Context 🔦

https://codesandbox.io/embed/white-wood-p10l6l?fontsize=14&hidenavigation=1&theme=dark

Your environment 🌎

`npx @mui/envinfo`

  Used Chrome for this test.

  System:
    OS: macOS 11.6.2
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 7.23.0 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Not Found
    Firefox: 97.0
    Safari: 15.4
  npmPackages:
    @mui/base:  5.0.0-alpha.60 
    @mui/icons-material: 5.5.0 => 5.2.4 
    @mui/lab: 5.0.0-alpha.72 => 5.0.0-alpha.60 
    @mui/material: 5.5.0 => 5.2.4 
    @mui/private-theming:  5.2.3 
    @mui/styled-engine:  5.2.4 
    @mui/styled-engine-sc: 5.4.2 => 5.1.0 
    @mui/styles: 5.5.0 => 5.2.3 
    @mui/system: 5.5.0 => 5.2.4 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.3 
    @mui/x-data-grid: 5.6.0 => 5.2.1 
    @types/react:  17.0.35 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: 5.3.3 => 5.3.3 

[flaviendelangle]

I intend to rework this "can't select the same day" behavior in the near future 👍

[flaviendelangle]

Duplicates #4613

Invented some workaround to overcome this issue )

import React from 'react';
import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/lab';


const CustomDesktopDatePicker: React.FC<DesktopDatePickerProps> = ({ onChange, ...props }) => {
  const [newDate, setNewDate] = React.useState<string>('');

  return (
    <DesktopDatePicker
      onChange={() => {}}
      onYearChange={(value) => {
        setNewDate(value);
        onChange(value);
      }}
      onAccept={(value) => {
        const newYear = new Date(newDate).getFullYear();
        const year = new Date(value).getFullYear();
        const sameYear = newYear === year;
        onChange(sameYear ? value : newDate || value);
        setNewDate('');
      }}
      {...props}
    />
  );
};

Here is a fix you can do which has been proposed in #4456

[flaviendelangle]

Duplicates #4456