[DatePicker] The `autoFocus` prop doesn't assign focus on the view

[mtusk]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When DatePicker's autoFocus prop is set to true, focus is not assigned to the DatePicker's text input right away.

Expected behavior 🤔

When DatePicker's autoFocus prop is set to true, focus should be assigned to the DatePicker's text input right away.

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/edit/react-qpgf7q?file=demo.tsx%3AL19

Steps:

1. Set DatePicker's autoFocus prop to true
2. Load the page
3. (focus is not assigned)

Context 🔦

For reference, my assumptions on how DatePicker's autoFocus should behave are based on TextField's autoFocus behavior:

autoFocus If true, the input element is focused during the first mount. https://mui.com/material-ui/api/text-field/#props

(example)

Your environment 🌎

A StackBlitz session modified only slightly from modified slightly from the StackBlitz session linked to from DatePicker's docs.

Order ID 💳 (optional)

No response

[LukasTy]

Hello @mtusk The autoFocus prop was recently added to CalendarPicker and implicitly—DatePicker. In its current form it handles autofocusing picker in static mode and is not passed down to InputProps.

We could have at least added comment to this property to explain it's behaviour. You are correct—now it is ambiguous as to what it will do.

IMO there are a few approaches we could take:

• add a comment explaining what autoFocus prop is used for (in turn adding it in the documentation as well)
• add logic to pass autoFocus prop to InputProps in turn covering the authors expected behaviour
• rename autoFocus to a different prop if we want to leave it only for focusing picker view and make it more clear

I'd be in favour of implementing 1st and 2nd points to make it more clear and resemble the autoFocus prop more correctly. What do you think @alexfauquette as it was the prop you added if I'm not mistaken..? 🤔

[alexfauquette]

I only see one problem which is when the picker is open from the beginning. In such a case, the input and the calendar will both ask for focus.

[flaviendelangle]

How about having one single autoFocus props on the pickers, that is passed to the input if the picker is not opened on mount and passed to the views otherwise ? If it's doable if feel like it would be the expected behavior.

As of today behavior, I guess the autoFocus prop should not have leaked to the non-static picker interfaces.

[eglitobias]

I created an issue for this problem today (maybe) in the wrong repository (https://github.com/mui/mui-x/issues/8329). For us it is very important that when you set the autoFocus on the Date Field the user can directly enter a date and does not have to make an unnecessary click first. Is this issue still being solved and what is its priority for you?

[flaviendelangle]

I transferred your issue :+1:

I'm closing this issue because now the field does have the focus when autoFocus={true}

[Sathishkumar1072]

How to i set always focused, because i need to show the label on top left of the container