[pickers] Field text selection on mouseDown

[oliviertassinari]

Summary 💡

It would be nice not to see the caret on the date field when selection a segment of the date. I think it would feel better, based on playing with the Chrome native date picker and React Aria.

I don't know how much effort this is, so to consider the ROI, it's not a huge UX improvement.

Examples 🌈

On https://react-spectrum.adobe.com/react-spectrum/DatePicker.html#datepicker, you don't see the mouse down caret, it selects the relevant section on mouseDown:

Screen.Recording.2023-08-16.at.13.02.11.mov

On https://mui.com/x/react-date-pickers/date-picker/, you see it, it feels a bit strange to wait for the mouseUp event:

Screen.Recording.2023-08-16.at.13.02.35.mov

There is a limit though, you can also see text selection 🙈

Screen.Recording.2023-08-16.at.13.07.43.mov

Motivation 🔦

No response

Order ID 💳 (optional)

No response

[noraleonte]

@oliviertassinari I agree that the behavior seems a bit strange 🤔 The first section is selected on mouse down/ on focus, but then you have to wait for mouse up for the next section that you clicked on to be highlighted🤔 I am not sure about the drawback of not being able to select multiple sections, however... I'll add this to the list of items that need grooming to discuss it in more detail with the team 👍

[gitstart]

@oliviertassinari we would like to pick this up

[LukasTy]

@gitstart I've assigned this issue to you, feel free to explore a solution.
We'll see if and then it would be most suitable to apply, given that it might be a breaking change. 👌

[TheOneTheOnlyJJ]

Any update on this?

[LukasTy]

@gitstart did you have a chance to investigate this issue? 🤔
I added a v8.x label as I suspect this change would have some breaking behaviors that would block us from delivering it in the current major.

[LukasTy]

Such a behavior is already present on the accessible DOM structure.

Given that it will become the default on v8, there is no clear rushing factor to implement it on the input behavior.
Especially, when the same behavior can be seen on other implementations using input (i.e. Kendo).

[oliviertassinari]

it will become the default on v8

@LukasTy Could we check the customization story before we change the default?

Having a demo would be great https://mui.com/x/react-date-pickers/custom-field/#using-material-textfield feels like how most people should customize the date picker. I mean, I would expect most people to come here and not use the Material UI text field raw but with a custom one they have created wrapping the Material UI one.

When we add enableAccessibleFieldDOMStructure it crashes:

Screen.Recording.2024-10-16.at.20.39.12.mov

And no, https://mui.com/x/react-date-pickers/custom-field/#using-material-pickerstextfield, I don't think that this is usable. To me PickersTextField, defeats the purpose of allowing to customize the text field. I expect it to work like the <Select>. I think we can deprecate PickersTextField altogether.