How to trigger focus event programatically in Reactjs

Question

I'm trying to trigger focus event programatically:

import { useRef } from "react";
import "./styles.css";

export default function App() {
  const ref = useRef();

  function focusTrig() {
    ref.current.focus();
  }
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button onClick={focusTrig}>Focus trigger</button>

      <div ref={ref} onFocus={() => console.log("FOCUSED!")}>
        Focus Target
      </div>
    </div>
  );
}

demo

The console.log binded with the onFocus event never run. Why?

UPDATE If I turn the target element from DIV to INPUT, the the console.log get run. But this openly conflicts with the official documentation, that states:

These focus events work on all elements in the React DOM, not just form elements.

ReactJS 17 DOC

see if this answers your question stackoverflow.com/questions/43145549/… — Dante_97
– Dante_97, Commented Aug 25, 2022 at 14:33

monim · Accepted Answer · 2022-08-25 15:37:59Z

1

Add tabIndex to the div element which indicates that it can be focused

<div tabIndex="0" ref={ref} onFocus={() => {console.log("FOCUSED!")}}>
        Focus Target
      </div>

edited Aug 25, 2022 at 15:37

answered Aug 25, 2022 at 15:23

monim

4,4762 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to trigger focus event programatically in Reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related