# Catching the blur event on an element and its children

DevFeed: [Catching the blur event on an element and its children](<https://devfeed.tech/articles/catching-the-blur-event-on-an-element-and-its-children-37248.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/catching-the-blur-event-on-an-element-and-its-children/>)

Author: Stanko

Published: 2021-09-19T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [React Component](<https://devfeed.tech/topics/react-component.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [component](<https://devfeed.tech/tags/component.md>), [focus](<https://devfeed.tech/tags/focus.md>), [framework](<https://devfeed.tech/tags/framework.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>)

## AI overview

A tutorial explains how to handle blur events on a parent element with focusable children. It uses requestAnimationFrame to wait for the next focus target, then checks whether document.activeElement remains inside the parent before running blur logic such as closing a menu.

## Source excerpt

Recently I implemented a fly out menu in React, and stumbled on the following problem - I had to catch a blur event on the menu, but it had multiple focusable children. When user is tabbing between these menu items, blur event is triggered every time on the parent, followed by the focus event on the next item. As I wanted to close the menu on blur, this would close it before user was able to get to the next menu item. Solution is fairly simple and it is not React exclusive - it can be used with any other framework or vanilla JavaScript. The flow goes something like this: Listen to a blur event on the parent element (in my case it was the menu). This will catch blur event on all of its children too. In the handler, give browser time to focus the next element (by using requestAnimationFrame). Check if the newly focused element is in our parent element. If it is, do nothing, as focus hasn't exited the parent yet. If it is not, we left the parent element completely and it is safe to do our blur logic (in my case, it was closing the menu). Code looks like this: const handleBlur = (e) => { const currentTarget = e.currentTarget; // Give browser time to focus the next element requestAnimationFrame(() => { // Check if the new focused element is a child of the original container if (!currentTarget.contains(document.activeElement)) { // Do blur logic here! } }); }; React component # I pulled out the logic and created a small React component: const ChildrenBlur = ({ children, onBlur, ...props }) => { const handleBlur = useCallback( (e) => { const currentTarget = e.currentTarget; // Give browser time to focus the next element requestAnimationFrame(() => { // Check if the new focused element is a child of the original container if (!currentTarget.contains(document.activeElement)) { onBlur(); } }); }, [onBlur] ); return ( <div {...props} onBlur={handleBlur}> {children} </div> ); }; and usage is pretty straight forward: <ChildrenBlur onBlur={() => { doSomethingCoolOnBlur() }} > <bu