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?)
refs this way, the new React.createRef() functionality should be used. More info here: reactjs.org/docs/refs-and-the-dom.html
I started with the answer given by David, where he describes two methods, and they both worked for me, but I had concerns about both:
On the first case it uses findDOMNode, what has some disadvantages: at minimum its use is discouraged, and it can easily be implemented in a way that it is considered an anti-pattern; and also it can make the code slower, by bypassing the virtual DOM and working with the DOM directly.
On the second option, create and manage a component state only to find that answer seems too much work, can easily get out of sync, and can cause the component to re-render unnecessarily.
So after trying to explore the issue more, I came up with the following solution:
if (this.props.id === document.activeElement.id) {
// your code goes here
}
The same comment on David's answer applies:
You should not do this in the
rendermethod though, because the input node might not be mounted yet. Use a lifecycle method likecomponentDidUpdateorcomponentDidMount.
Advantages:
Requirements:
id property that is passed to the form element you want to check (which is most likely the case anyway)Using hooks:
First you create and initialize your Reference
const yourElement = useRef(null)
Then You tag your element with the reference you have just created:
<div ref={yourElement}>Im an DOM node</div>
And then, you use this logic as you need to compare if the document.activeElement document property is equal to the DOM node you are referencing to
yourElement.current === document.activeElement
There is much easier approach with hooks.
Make an import
import React, {useState} from "react";
Define
const [isMyInputFocused, setIsMyInputFocused] = useState(false);
And in your chosen input just add
onBlur={() => setIsMyInputFocused(false)}
onFocus={() => setIsMyInputFocused(true)}
And from now you could access the isMyInputFocused as you wish.
Using functional component you can determine if the current input has focus:
import React from "react";
export default function App() {
const ref = React.createRef(null);
const handleMouseOut = (currentRef) => {
if (document.activeElement === currentRef) {
console.log("Yesss");
}
};
return (
<div className="App">
<input
type="text"
ref={ref}
onMouseOut={() => handleMouseOut(ref.current)}
/>
</div>
);
}
Live example: https://codesandbox.io/s/reverent-allen-0qr8u
Depending on what you want to do, you can use onFocus (React 17) or onBlur (React 16) to implement the functionality that you want when these things are in focus.
***Adjusting answer from @Abhishek E H, there will be a little delay if you use onMouseOut but using onFocus works perfectly fine. Thank you for the inspiration.
import React from "react";
export default function App() {
const ref = React.createRef(null);
const handleMouseOut = (currentRef) => {
if (document.activeElement === currentRef) {
console.log("Yess");
}
};
return (
<div className="App">
<input
type="text"
ref={ref}
onFocus={() => handleMouseOut(ref.current)}
/>
</div>
); }