onBlur for entire react element

OnBlurComponent.jsx

function OnBlurComponent({ onBlur }) {
  const handleBlur = (e) => {
    const currentTarget = e.currentTarget;

    // Check the newly focused element in the next tick of the event loop
    setTimeout(() => {
      // Check if the new activeElement is a child of the original container
      if (!currentTarget.contains(document.activeElement)) {
        // You can invoke a callback or add custom logic here
        onBlur();
      }
    }, 0);
  };
  
  return (
    <div tabIndex="1" onBlur={handleBlur}>
      Hello <input type="text" value="world" />
    </div>
  );
}

OMG, you are a genius! Thank you so much for sharing this!

@pstoica
Thanks for this! Just a heads up, I think you forgot to change the callback onBlur={onBlur} to onBlur={handleBlur} in the newest revision:

return (
    <div tabIndex="1" onBlur={handleBlur}>
      Hello <input type="text" value="world" />
    </div>
  );

@pstoica
Thanks for this! Just a heads up, I think you forgot to change the callback onBlur={onBlur} to onBlur={handleBlur} in the newest revision:

return (
    <div tabIndex="1" onBlur={handleBlur}>
      Hello <input type="text" value="world" />
    </div>
  );

glad it helped. thanks for catching that, updated!

You're my hero!

That helps a lot!

You can also use event.relatedTarget to get the next active element on blur if you don't care about IE 11.

@diegohaz I was look for this for so long, thanks a lot. Was working with emoji pickers and for some reason document.activeElement does not work when I click on the picker itself and closes the pop over even though it is a part of the div, but using event.relatedTarget works perfectly fine now.