[DateRangePicker] Using SingleInputDateRangeField with readOnly=true causes unexpected UX

[TimESQuit]

Steps to reproduce

Minimal example of DateRangePicker using SingleInputDateRangeField and readOnly: true:
https://codesandbox.io/p/devbox/loving-tree-lphyk2?file=%2Fsrc%2FDemo.tsx

Steps:

1. Click somewhere in the starting date area of the field.
2. Notice that the ending date area of the field is now highlighted.
3. Click a date in the calendar.
4. Notice the single selected date displays in the field as (and acts in the calendar(s) as) the end date.

Current behavior

Using DateRangePicker with SingleInputDateRangeField and readOnly: true forces the the first date selected to be the end date of the range, with no apparent way to easily override/modify this behavior. Note: this only seems to happen with readOnly: true.

Expected behavior

Using DateRangePicker with SingleInputDateRangeField and readOnly: true behaves the same as when readOnly: false and selects the start date first.

Context

Using @mui/x-date-pickers-pro@^5, we used the DateRangePicker with renderInput to create a single element to display both start and end dates. For our UX, we found it more trouble to allow a user to edit the field directly (not from the UI calendar popups), so disabled the field. With the move to SingleInputDateRangeField and removal of renderInput in v6 and v7, there doesn't seem to be a great way to replicate a single basic read-only field with DateRangePicker.

Your environment

npx @mui/envinfo

 # Command run inside codesandbox terminal

 System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: latest => 11.11.4 
    @emotion/styled: latest => 11.11.0 
    @mui/material: latest => 5.15.14 
    @mui/x-date-pickers: latest => 7.0.0 
    @mui/x-date-pickers-pro: latest => 7.0.0 
    @types/react: latest => 18.2.72 
    react: latest => 18.2.0 
    react-dom: latest => 18.2.0 
    typescript: latest => 5.4.3 

Search keywords: readOnly single input SingleInputDateRangeField DateRangePicker
Order ID: 85560

[michelengelen]

Hey @TimESQuit your Codesandbox is unavailable. You might have to make it public.
Could you do that and comment here when it is available so we can have a look? Thanks!

[TimESQuit]

@michelengelen
Sorry about that - should be public now

[LukasTy]

@TimESQuit The problem has been identified and a possible fix PR raised.
I've also noticed that the focused flag has not been properly added to the SingleInputDateRangeField—it does not receive focus style when focused, only when Picker is opened.

P.S. If you would try adding an enableAccessibleFieldDOMStructure prop—the UX behavior would work as expected even on v7.0.0.
Feel free to try these new Field components if you have the option. 😉

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @TimESQuit?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[TimESQuit]

I can't fully tell, but does the code fix just apply to v7? We recently migrated to v6 and are not looking to migrate to v7 right away so would really need this change in v6 as well. Thanks!

[LukasTy]

I can't fully tell, but does the code fix just apply to v7? We recently migrated to v6 and are not looking to migrate to v7 right away so would really need this change in v6 as well. Thanks!

It has been fixed only on v7 for now.
We'll backport the fix to v6 as well. 👌

[LukasTy]

@TimESQuit Would it be fine if we released this fix on v6 in around a week (~next Thursday)?

[TimESQuit]

Around next Thursday works. Thanks!