109

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>   

7 Answers 7

198

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?)

1
  • 1
    For anyone that finds this post years later: in React 16.x and up it's no longer recommended to use refs this way, the new React.createRef() functionality should be used. More info here: reactjs.org/docs/refs-and-the-dom.html
    – Manuel
    Nov 13, 2018 at 18:58
19

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:

  1. 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.

  2. 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 render method though, because the input node might not be mounted yet. Use a lifecycle method like componentDidUpdate or componentDidMount.

Advantages:

  • uses the current component properties (which are immutable values)
  • doesn't require state management, and therefore won't cause unnecessary re-rendering
  • doesn't require DOM traversing, so performance should be as good as it gets
  • doesn't require creating a component reference

Requirements:

  • your component should have an id property that is passed to the form element you want to check (which is most likely the case anyway)
11

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
9

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.

2
  • 2
    This is a "psudeo focus" and will not scale well: eg: If there were 10 inputs you would have to hoist this state and start managing refs or this state would need to be applied to each input and there is a risk of it going out of sync Jan 29, 2021 at 20:45
  • 1
    Amazing answer thank you. I'm using this for a sibling relationship on single use so this works just fine for me
    – Harry
    Aug 18, 2021 at 15:42
3

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

0

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.

0

***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>

); }

2
  • This is the exact same answer as the one you name, except with bad formatting, isn't it? Feb 20 at 21:02
  • Almost exactly but I changed the onMouseOut to onFocus since onFocus updates the handleMouseOut immediately the input is on focus but there is a delay with onMouseOut Feb 25 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.