Form contract / Refs and focus

Refs and focus

A composite field has several focusable parts. Exactly one of them is the answer to ref.focus().

Why it matters

react-hook-form’s shouldFocusError calls focus() on the ref of the first invalid field. If that ref points at a wrapper <div>, nothing happens and the user is left staring at a form that will not submit with no indication why.

Every component forwards its ref to the primary input through useImperativeHandle — the number field on CardInput, the national-number field on PhoneInput, the hours segment on a segmented DurationInput.

onBlur is subtree-aware

// Moving from the country trigger to the number field is NOT a blur:
// both are inside the same component.
//
//   [ US +1 v | (415) 555-2671 ]
//     ^ tab ----> ^              onBlur does not fire
//                        tab --> onBlur fires

<PhoneInput label="Phone" onBlur={() => console.log("left the field")} />