[DateRangePicker] 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

[noraleonte]

Hey @Abhid1239 👋
Thanks for reporting this. I can confirm there is an issue when opening the picker again, as the focus jumps directly to the first section. After the picker is opened you can focus on the individual sections, but I agree it's not ideal 🤔 I'll add this to our board so we can discuss how to improve the UX here.

[Abhid1239]

Hey @noraleonte, this feature/UX is already correctly handled/present in single date picker. This only arrises in DateRangePicker and SingleDateRangePicker. I think it can be handled by the developer and can be either converted into a bug/feature

[Abhid1239]

Again after tinkering a bit more and going through the code too.
We actually have a prop called as selectedSections. Where we can specify which section needs to be focused when date is selected. I think here when nothing is selected it should be handled internally (this might be the issue since in the code base it is defaulted to "day" and is causing the issue (from my analysis🤔))

API Reference

selectedSections	'all'| 'day'| 'empty'| 'hours'| 'meridiem'| 'minutes'| 'month'| 'seconds'| 'weekDay'| 'year'| number	-	The currently selected sections. This prop accepts four formats: 1. If a number is provided, the section at this index will be selected. 2. If a string of type FieldSectionType is provided, the first section with that name will be selected. 3. If "all" is provided, all the sections will be selected. 4. If null is provided, no section will be selected. If not provided, the selected sections will be handled internally.

[noraleonte]

Thanks for looking into it more. I think the problem is that if you click on the input of the picker (when it has a value), it selects the section you clicked on, opens the picker and refocuses the first section of the input by default. I think it's something we need to look into internally 🤔
It's the same if the selectedSection is controlled 🤔

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Abhid1239 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.