How to unfocus a parent div , when a child div is clicked-CodePudding

I am new to styling. I have something like

<div className= 'parent'>
   <div className='foo'> <Increment> </div>
   <div className= 'child'>
        <input type = 'number'/>
   </div>
</div>

So for one of the styling scenario I am using .parent:focus-within{<>} in css. I want the parent class to not be focus when component is clicked. Afaik , parent:focus-within will be true when any of its child is in focus.

CodePudding user response：

I would like you to find your answer in the given below link. Thanks.

On stackoverflow: Blur event triggered by click on child element

CodePudding user response：

you can catch the focus event and use Event.stopPropagation() function.

Something like that:

const handleFocus = (event) => {
event.stopPropagation()
}

<div className= 'parent'>
  <div onFocus={handleFocus}>
    <div className='foo'> <Increment> </div>
    <div className= 'child'>
        <input type = 'number'/>
    </div>
  </div>
</div>