How can I detect whether an input element such as the following is currently focused within a ReactJS render function?
<input type=text style={searchBoxStyle} placeholder=Search></input>
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?)
