JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <input type="text" />
</div>

JavaScript

var div = document.getElementById('test');

div.addEventListener('focus', handler, false); // does not work, focus does not bubble
div.addEventListener('blur', handler, false); // does not work, blur does not bubble

div.addEventListener('focusin', handler, false); // works when input is focused, as the event bubbles
div.addEventListener('focusout', handler, false); // works when input loose focus, as the event bubbles

function handler(event) {
    console.log(event.type)
}