[DateRangePciker] When any date is selected and get out of focus and then try to update the year or month it directly focuses on date

[Abhid1239]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/run?file=Demo.tsx
2. Click on any of the date picker
3. then click on the second date year change
4. It would get refocused to date of that date picker

This is an issue of focus where it doesn't get applied directly that specific year or month it get's the focused applied to the date of date picker same issue with single date pickers.
The same functionality is present in other react components library

• https://coreui.io/react/docs/forms/date-range-picker/
• https://rsuitejs.com/components/date-range-picker/
• https://nextui.org/docs/components/date-range-picker

All these library supports date picker year and month direct focus when the dates are filled

[

Screen.Recording.2024-12-14.at.14.30.04.mov

](url)

Current behavior

When any date is selected and then we try to update year or month only we get directly focused to date of the date picker

Expected behavior

When any date is selected and then we try to update year or month is should focus the year and month

Context

Correcting user experience when year selected it should focus the year when it wasn't focused. IF focused it is working correctly but not on focus

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: focus issue in date range pciker