JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="dialog">I am a dialog</div>
<input id="input" value="Click on me then look in your console" />

CSS

#input {
    position: relative;
    z-index: 5000;
    border: 2px solid red;
    width: 400px;
}

JavaScript

$('.dialog').dialog({
    modal: true
});

var blur = 0;
var focus = 0;

$('#input').on('focus', function() {
    focus++;
    console.log('focus #'+focus);
    var inp = this;
    setTimeout(function() {
        inp.select();
    }, 1);
});

$('#input').on('blur', function() {
    blur++;
    console.log('blur #'+blur);
});