Focus input when another Element is clicked in React

# Focus input when another Element is clicked in React

To focus input when another element is clicked in React:

1. Set the ref prop on the input element.
2. Set the onClick prop on the other element.
3. When the other element is clicked, focus the input, e.g. ref.current.focus().

Copied!
import {useRef} from 'react';

const App = () => {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current.focus();
  };

  return (
    <div>
      <input ref={ref} id="message" name="message" />

      <hr />

      <button onClick={handleClick}>Focus input</button>
    </div>
  );
};

export default App;

We used the useRef hook to create a ref object that gives us access to the input element.

Copied!
const ref = useRef(null);

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Copied!
const handleClick = () => {
  ref.current.focus();
};

When we pass a ref prop to an element, e.g. <input ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

Copied!
<button onClick={handleClick}>Focus input</button>

Note that this doesn't have to be a button, you can set the onClick prop on a div or any other element.

We used the focus() method to focus the input field in the handleClick function.

Copied!
ref.current.focus();

The current property on the ref gives us access to the input element, so calling ref.current.focus() sets the focus on the input.

Here is an example of focusing an input element when a div gets clicked.

Copied!
import {useRef} from 'react';

const App = () => {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current.focus();
  };

  return (
    <div>
      <input ref={ref} id="message" name="message" />

      <hr />
      <hr />
      <hr />

      <div
        style={{backgroundColor: 'lime'}}
        onClick={handleClick}
      >
        bobbyhadz.com
      </div>
    </div>
  );
};

export default App;

This time we added the onClick event listener on a div element.

Every time the div gets clicked, the handleClick function is invoked.

Copied!
const handleClick = () => {
  ref.current.focus();
};

All we have to do is use the ref to focus the input element in the body of the handleClick function.

If you need to check if an element is focused, click on the following article.

I've also written a tutorial on how to detect when the focus is lost.