JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<script src="https://rawgithub.com/robotdan/jquery-ui/bug_9602/ui/jquery.ui.button.js"></script>    
<input type="text" id="txt" size="20" />
<button type="button" id="btn">Button</button>

JavaScript

// To reproduce a bug enter text and then click a button immediately. 
// The button should be now in "disabled" state but it is in purgatory: 
// it has styles between "active" and "disabled" states. 
// If you focus in the text input again, it should get "active" state, however
// it falls into other strange state being a next mixture of "active" and "disable" states.

$("#btn").button();

$("#txt").blur(function () {  
    $("#btn").button("disable");
});

$("#txt").focus(function () {
    $("#btn").button("enable");
});