mui
[pickers] Field text selection on mouseDown
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:
https://github.com/mui/mui-x/assets/3165635/0dbd34d4-ad70-478b-b960-a41f7a629504
On https://mui.com/x/react-date-pickers/date-picker/, you see it, it feels a bit strange to wait for the mouseUp event:
https://github.com/mui/mui-x/assets/3165635/ad6ee935-4ceb-4cb2-ad3a-b376bd93f91d
There is a limit though, you can also see text selection 🙈
https://github.com/mui/mui-x/assets/3165635/a3345825-747d-4e35-a367-102051e50ae3
Motivation 🔦
No response
Order ID 💳 (optional)
No response
@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 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. 👌
@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.
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).
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:
https://github.com/user-attachments/assets/81bba22c-c96b-44c9-a856-ea6c1d63d56e
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.