[pickers] First date part is not automatically selected on Mac OSX

[DASPRiD]

Steps to reproduce

Link to live example: https://mui.com/x/react-date-pickers/date-picker/

Steps:

1. Go to https://mui.com/x/react-date-pickers/date-picker/
2. Click on the Basic date picker field

Current behavior

On Mac OSX (both Firefox and Safari) it highlights/selects the entire field instead of just the MM part. Thus the user cannot enter the date manually, unless they click on the individual part again.

Expected behavior

On focus it should select the first date part like on other browser/system combinations.

Context

No response

Your environment

This issue was reported by a client. They are running Mac OSX (latest version) and tested both Safari and Firefox (latest version respectively). They tested with a clean profile, so no influence from any addons.

Search keywords: Mac OSX Safari Firefox DatePicker

[LukasTy]

Hello @DASPRiD, could you provide a video showcasing the issue or at least the exact steps to reproduce it?

I've tried it on MacOS 14.2.1 on Safari and Firefox and the behavior seems correct to me... 🤷 🙈

Screen.Recording.2024-05-20.at.12.22.18.mov

[DASPRiD]

When the client clicked within the field where the MM part is, it was working as expected. Clicking outside (right next to the YYYY) should trigger the issue. Let me see if I can get a video from them.

[DASPRiD]

datepicker_macos14.5_firefox126.0.mov

[michelengelen]

@LukasTy I can reproduce this sometimes as well, but only when I hold the mouseclick for a short amount of time ... maybe when micromovement of the cursor is happening it will run into the drag-selection 🤷🏼

EDIT: this happens in chrome as well.
EDIT2: I do use a trackpad where this micromovements are more likely to occur

[LukasTy]

@DASPRiD @michelengelen I can also only experience this problem when moving the mouse during the click...
I'm not sure we can do anything about this as it is how OS/Browser/input works... 🤷
There are multiple ways to interact with the Pickers. Users can focus the input using tabulation, they can also use the Calendar to select a preferred day. 🤔

I would suggest trying the accessible DOM structure field and check if you prefer that behavior better. 😉

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.