JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="0" id="t2" style="height: 500px;border: 1px solid red;">
    <input type="text" id="t"/>
</div>

JavaScript

var i=0;
    $('#t2').on('focusin', function () {
        console.log((++i)+' window focusin: ' + (document.activeElement.nodeName));
    });
   
    // order is wrong
    $('#t').on('focus', function () {
        console.log((++i)+' t focus');
    });
document.body.focus();
setTimeout(function(){
    $('#t').trigger('focus');
},1000);

setTimeout(function(){
    console.log('second fire focus');
    $('#t').trigger('focus');
},2000);