How to prevent parent div lose focus when child element is clicked

Question

<parent onBlur={function}>
  <child>
    <child>
    </child>
  </child>
</parent>

In a structure like this, I want to catch if parent element loses focus or not. I want to fire that behavior when clicked outside of the parent div. However, parent element loses its focus when I click child element as well. You can think this structure as dropdown menu. Is there a way to achieve this inside of the stateless react component? I cannot use jquery or other libraries.

perhaps [this article](https://medium.com/@jessebeach/dealing-with-focus-and-blur-in-a-composite-widget-in-react-90d3c3b49a9b) helps — Jaromanda X, Jul 28 '19 at 08:54
or [this SO question](https://stackoverflow.com/questions/12092261/prevent-firing-the-blur-event-if-any-one-of-its-children-receives-focus) — Jaromanda X, Jul 28 '19 at 08:54
React does not support focusin and focusout events thats the problem with this [https://stackoverflow.com/questions/12092261/prevent-firing-the-blur-event-if-any-one-of-its-children-receives-focus] — wolf, Jul 28 '19 at 08:58
wolf calls it a "parent div" so i assumed that the react component returns a div — Wali Waqar, Jul 28 '19 at 12:47
Yes it is true Wali, react component returns a div and it does have focus. Right now i am trying to implement something with react hooks. I will let you know if it works — wolf, Jul 29 '19 at 06:39

score 0 · Answer 1 · answered Oct 11 '22 at 11:58

This can be achieved with mouse events.

If the user clicks on the screen we can check if the click is inside or outside the component and treat it as Focus event to blur event.

Click Inside - Focus
Click Outside - Blur

function Parent(props){
  const ref = useRef();
  
  useEffect(()=>{
  
    document.addEventListener("mousedown", checkFocus.bind(this))
    return ()=>{
      document.removeEventListener("mousedown", checkFocus.bind(this))
    }
  },[])
  
  const checkFocus = (event)=>{
    if(ref.current && !ref.current.contains(event.target) && props.onBlur)
      props.onBlur()
  }
  
  return (
    <div ref={ref}>
      {props.children}
    </div>
  );
  
}

function Child(){

  return (
    <h1>child</h1>
  );

}

function Main(){

  return (
    <Parent onBlur={()=>{ console.log("focus lost.") }}>
      <Child>
        <Child>
        </Child>
      </Child>
    </Parent>
  );

}

How to prevent parent div lose focus when child element is clicked

1 Answers1