issue: focus not set to MUI date inputs when validation failed

[Mario-Eis]

Version Number

7.67.0

Codesandbox/Expo snack

https://codesandbox.io/p/devbox/nifty-lumiere-5jnwkg?workspaceId=ws_Q8FtixA3WEZW4dYkGFmhL2

Steps to reproduce

1. Go to provided code sandbox
2. Click on 'submit'

Expected behaviour

The focus should be set to the date field. But it just flickers and the focus is moved away from the field again.
Setting the focus to a date input programatically works fine. Below the example I added a button and a second date field. Click on the button "set focus" and the focus will be set as expected.
There is something going on when submitting, that steals away the focus.

Update: Even more interestingly, I found out, that validating the form with "trigger" and shouldFocus: true works fine.
I updated the sandbox.

What browsers are you seeing the problem on?

Chrome

Relevant log output

Code of Conduct

• I agree to follow this project's Code of Conduct

[Abolfazl26s]

Hi, can I take this issue?
I can reproduce the bug and submit a fix for the example/documentation.

[Appof]

Hi there! Experiencing similar issue

MUI DatePicker v8 + react-hook-form

Environment:

• react-hook-form: 7.65.0
• @mui/x-date-pickers: 8.5.3
• DateAdapter: Moment

Problem

MUI DatePicker v8 doesn't auto-focus when validation fails during handleSubmit().

What was tried to fix(didn't help)

• Point ref to slotProps inputRef(see the screenshot)

Is there a recommended way to programmatically focus MUI v8 DatePicker's contenteditable sections, or will this require changes in react-hook-form's core focus mechanism to support non-input focusable elements?

[kallebornemark]

Not sure if this is exactly related, but with MUI X v9 pickers, RHF's ref.focus() path no longer maps directly to the picker field.
The picker exposes focus via fieldRef.focusField(), so I bridged it with useImperativeHandle:

const fieldRef = useRef<FieldRef<Date | null> | null>(null);

useImperativeHandle(
  ref,
  () =>
    ({
      focus: () => fieldRef.current?.focusField(0),
    }) as HTMLInputElement,
  []
);

  return (
    <DatePicker
      slotProps={{
        ...props.slotProps,
        field: {
          ...props.slotProps?.field,
          fieldRef: fieldRef,
        },
      }}
    />
  );
});

[hwajongpark]

The bridge in the last comment is probably the right direction. The key detail is that React Hook Form focuses the registered field by calling ref.focus(). That works cleanly when the registered ref is a normal input, but the newer MUI X picker field is section-based, so the useful focus API is on the picker field ref instead.

For MUI X v9, the public API is fieldRef and you pass it through slotProps.field:

import * as React from "react"
import { DatePicker } from "@mui/x-date-pickers/DatePicker"
import type { FieldRef } from "@mui/x-date-pickers/models"

const RHFDatePicker = React.forwardRef<HTMLInputElement, DatePickerProps<Date | null>>(
  function RHFDatePicker(props, ref) {
    const fieldRef = React.useRef<FieldRef<Date | null>>(null)

    React.useImperativeHandle(
      ref,
      () =>
        ({
          focus: () => fieldRef.current?.focusField(0),
        }) as HTMLInputElement,
      []
    )

    return (
      <DatePicker
        {...props}
        slotProps={{
          ...props.slotProps,
          field: {
            ...props.slotProps?.field,
            fieldRef,
          },
        }}
      />
    )
  }
)

Then in Controller, give RHF this wrapper ref:

<Controller
  name="date"
  control={control}
  render={({ field, fieldState }) => (
    <RHFDatePicker
      value={field.value}
      onChange={field.onChange}
      ref={field.ref}
      slotProps={{
        textField: {
          error: !!fieldState.error,
          helperText: fieldState.error?.message,
        },
      }}
    />
  )}
/>

For MUI X v8, the same idea applies, but the prop name was still unstableFieldRef:

<DatePicker
  slotProps={{
    field: {
      unstableFieldRef: fieldRef,
    },
  }}
/>

MUI documents the v8 -> v9 rename here: https://next.mui.com/x/migration/migration-pickers-v8/#renamed-fieldref-props

And the current MUI field docs describe using fieldRef for imperative methods like focusField: https://mui.com/x/react-date-pickers/fields/#imperative-api

So I would not expect RHF core to be able to solve this generically unless MUI exposes a plain focusable input ref for the exact focus target. The stable integration point is to adapt the picker field API to the ref.focus() contract that RHF already expects.