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

Asked Jul 28 '19 at 08:37

Active Jul 28 '19 at 08:37

Viewed 1,518 times

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

asked Jul 28 '19 at 08:37

wolf

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
divs do not have focus. tags like input do – Wali Waqar Jul 28 '19 at 11:43
@WaliWaqar where's the div? – Jaromanda X Jul 28 '19 at 12:14
@wolf - what about that article? – Jaromanda X Jul 28 '19 at 12:15
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

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

0 Answers0