Ad

How To Remove Focus From A Parent Element When A Child Element Is Clicked

- 1 answer

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.

Ad

Answer

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

Something like that:

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

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

Ad
source: stackoverflow.com
Ad