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.