how to trigger on Blur only when clicked outside parent component and not child component in react js

Hello readers! In this post I have shared the details about “how to trigger on Blur only when clicked outside parent component and not child component in react js”. Okay, let’s move on to the post.

how to trigger on Blur only when clicked outside parent component and not child component in react js

// assign handleBlur to parent's onBlur i.e. <Parent onBlur=handleBlur />
handleBlur(event) 
    // currentTarget is the parent element, relatedTarget is the clicked element
    if (!event.currentTarget.contains(event.relatedTarget)) 
        // code when clicked outside parent and children components
    

Conclusion

I hope this article helps you to know about “how to trigger on Blur only when clicked outside parent component and not child component in react js”. If you have any queries regarding this post please let us know via the comment section. Share this tutorial with your friends and family via social networks.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coder Diksha. Here, I post about programming to help developers.

Share on:

Leave a Comment