JSFiddle - React, Tailwind, and code Playground

HTML

<input type=text id=text1 /><br />
<input type=text id=text2 /><br />
<div id=dofocus>Focus text1</div>

JavaScript

var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
var dofocus = document.getElementById("dofocus");

text1.addEventListener("focus", function(){
    console.log("text1 focus");
}, false);
text1.addEventListener("blur", function(){
    console.log("text1 blur");
}, false);
text2.addEventListener("focus", function(){
    console.log("text2 focus");
}, false);
text2.addEventListener("blur", function(){
    console.log("text2 blur");
}, false);
dofocus.addEventListener("click", function(){
    console.log("before focusing text1");
    text1.focus();
    
    setTimeout(function () {
        console.log("after focusing text1");
    }, 1);
    
});