[pickers][MobileDateTimePicker] Selection visible when clicking in MUI 6

[dotjan37]

Steps to reproduce

Click on mobile datetimepicker, when you click on it, selection is colored of the clicked digits, this is a difference between MUI 6 and older MUI 5.
See attached screenshot

Current behavior

Shows selection

Expected behavior

Do not show selection

Context

No response

Your environment

npx @mui/envinfo

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

Search keywords: mobile datetime picker selection

[michelengelen]

Hey @dotjan37 could you share what version you are using and where you encountered this? The reason I am asking is we do have the material-ui package which is currently on v6 (MUI 6) and the advanced components, MUI-X, which are currently on v7. The datepicker is a part of the X products, so we would need to know to which version yhou are referring exactly. Thanks!

[dotjan37]

It was a screenshot from the official documentation https://mui.com/x/react-date-pickers/date-time-picker/ (under "Available components" > Mobile variant).

I see the same effect when I test it with:

"dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.1.3",
    "@mui/material": "^6.1.3",
    "@mui/x-date-pickers": "^7.20.0",
    "dayjs": "^1.11.13",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.27.0"
}

[michelengelen]

well, it is the default behavior for our textfield and there is no standard to that, afaik 🤷🏼

@flaviendelangle or @LukasTy are the experts for this. So would any of you know if there is a standard on how the selection behavior? I checked the WAI-ARIA page, but could not find it there.

[flaviendelangle]

The field component of the version 6 and more recent have a new editing experience that is closer from the browser date input.
You can use the arrow the edit the selected section or type manually your value.

So the selection is fully intended 👍

However, on the mobile variant, the field is not editable so it's not great to have a section selected.
This problem will go away in the next major (v8) where the mobile variant will be editable as well.

[dotjan37]

Yes, it was indeed about the mobile (not editable) variant.
Oké, thanks for the information and the plans for v8 !

[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

@dotjan37 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.