JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="foo" />
<input type="text" id="bar" />
<div id="eventlog"></div>

JavaScript

function log(text) {
    $('#eventlog').append($('<p>').text(text));
};

$(function() {
    $('#foo').on('focus', function() { log('jquery focus'); });
    $('#foo').on('focus.one', function() { log('jquery focus.one'); });
    $('#foo').on('focus.two', function() { log('jquery focus.two'); });
    $('#foo')[0].addEventListener('focus', function() { log('native focus'); });
    
    log('NATIVE FOCUS');
    $('#foo')[0].focus();
    $('#bar').focus();
    log('JQUERY FOCUS');
    $('#foo').focus();
    $('#bar').focus();
    log('TRIGGER FOCUS');
    $('#foo').trigger('focus');
    $('#bar').focus();
    log('TRIGGER FOCUS.ONE');
    $('#foo').trigger('focus.one');
    $('#bar').focus();
    log('TRIGGER FOCUS.TWO');
    $('#foo').trigger('focus.two');
    $('#bar').focus();
});