Manual setError(“…”) cancels setFocus(“…”) behaviour?

[amscu-dev]

Version Number

7.66.0

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/58y99m

Steps to reproduce

Description:
In the MainSignUpCard component, I noticed that calling form.setFocus("email") immediately after form.setError("email", {...}) does not focus the input as expected.

form.setError("email", {
type: "custom",
message: "An account with this email already exists.",
});
form.setFocus("email"); // ❌ input does NOT receive focus

The only workaround I found is to wrap setFocus in a requestAnimationFrame:

form.setError("email", {
type: "custom",
message: "An account with this email already exists.",
});
requestAnimationFrame(() => {
form.setFocus("email"); // ✅ input receives focus
});

Steps to Reproduce:

Render a form using useForm with FormInput components controlled via Controller.

Trigger setError on a field programmatically (e.g., in an API callback).

Immediately call setFocus for the same field.

Observe that the input does not receive focus unless wrapped in requestAnimationFrame.

Actual Behavior:
The focus is ignored when setFocus is called immediately after setError. Only using requestAnimationFrame or delaying the call allows the input to receive focus.

Additional Context / Notes:

The issue seems related to internal state updates in React Hook Form.

Using Controller and React.memo may contribute to the timing of ref updates.

This behavior might be unexpected for users who want to focus a field immediately after a validation error.

Expected behaviour

Expected Behavior:
Calling setFocus("fieldName") after setError should focus the input immediately.

[chrisjcthomas]

Use setError's focus option instead of making focus a second, competing update:

form.setError(
  "email",
  {
    type: "custom",
    message: "An account with this email already exists.",
  },
  { shouldFocus: true },
)

shouldFocus uses the field ref registered with React Hook Form. With Controller, make sure the actual focusable element receives field.ref (spreading field into a native input does that; a custom FormInput needs to forward it). It also will not focus a disabled input.

This is preferable to setError() followed by setFocus(): the error update can re-render or replace a controlled input before the separate focus call has a stable ref. requestAnimationFrame only hides that timing problem. If the one-call form above still does not focus, the next thing to inspect is ref forwarding in FormInput, not an intentional delay in RHF.

https://react-hook-form.com/docs/useform/seterror