JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.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");
});