Validate a field when it receives or loses focus
Form validation
React 19+ · Type Alias
FocusEvent
React.FocusEvent is the event type for React focus handlers such as onFocus and onBlur. Its bubbling behavior lets parent handlers analyze focus movement using event targets and relatedTarget.
How it works
React.FocusEvent is the event type used for focus-related handlers such as onFocus and onBlur. Because React focus events bubble, a parent handler can inspect currentTarget, target, and relatedTarget to distinguish direct focus from focus moving within or across its subtree.
Syntax
React.FocusEvent<T = Element, E = NativeFocusEvent>Key points
- Use React.FocusEvent to type handlers for focus-related events.
- A focus handler attached to a parent can receive focus events originating from descendants.
- onFocus runs when an element gains focus.
- onBlur runs when an element loses focus.
Common mistakes
- Do not assume onFocus behaves like the native focus event: React propagates it through the component tree.
- Use relatedTarget together with currentTarget when deciding whether focus entered or left a parent subtree rather than merely moved between its children.
Example: Typing a focus handler
function FocusExample() {
return (
<div
tabIndex={0}
onFocus={(event: React.FocusEvent<HTMLDivElement>) => {
if (event.currentTarget === event.target) {
console.log('focused container');
}
}}
>
<input onFocus={() => console.log('focused input')} />
</div>
);
}This handler annotates the event passed to onFocus and compares the attached element with the actual focused target.
When to use it
Track focus across a group of controls
Accessible composite widgets
Detect focus entering or leaving a component subtree
Focus boundaries
Interview questions
QWhat is React.FocusEvent used for?
React.FocusEvent is the event type for focus-related React handlers, including onFocus and onBlur. A handler can use its event object to inspect the focused element and the element involved in the focus transition.
Follow-up: How can a parent detect focus entering its whole subtree? Compare relatedTarget with currentTarget and test whether currentTarget contains relatedTarget.
QHow does React.FocusEvent differ from the native focus event?
React focus events bubble, so a parent can observe focus changes from descendants. The handler can compare currentTarget and target to distinguish focus on the parent from focus on a child.
Follow-up: How would you distinguish a child-to-child focus move from focus entering the subtree? Check whether currentTarget contains relatedTarget; an internal move remains contained.
QWhich event properties are useful for focus-boundary logic?
currentTarget is the element whose handler is running, while target is the element that received focus or lost it. relatedTarget identifies the other element involved in the transition and helps detect movement across a boundary.
Follow-up: What condition indicates focus entered the parent from outside? currentTarget does not contain relatedTarget, so the previous focus was outside the parent subtree.
Related
onFocusonBluronFocusCapturecurrentTargetrelatedTarget