Detect whether input element is focused within ReactJS

by

You can check against document.activeElement as long as the input node is mounted and there is a reference to it:

const searchInput = React.useRef(null)

if (document.activeElement === searchInput.current) {
  // do something
}

return <input type="text" ref={searchInput} />

Another way would be to add event listeners for the focus and blur events inside the input field:

const [focused, setFocused] = React.useState(false)
const onFocus = () => setFocused(true)
const onBlur = () => setFocused(false)

return <input type="text" onFocus={onFocus} onBlur={onBlur} />

Note that this will call a re-render each time the node is focused or blurred (but this is what you want, right?)

Leave a Comment