JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css">
<h1 id="qunit-header">jQuery UI Dialog Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<div id="dialog1"></div>
<div id="dialog2"></div>
<div id="form-dialog" title="Profile Information">
<fieldset>
<legend>Please share some personal information</legend>
<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
<label for="favorite-color">Your favorite color</label><input id="favorite-color">
</fieldset>
<div role="group" aria-describedby="section2">
<p id="section2">Some more (optional) information</p>
<label for="favorite-food">Favorite food</label><input id="favorite-food">
</div>
</div>
<div class="wrap" id="wrap1"></div>
<div class="wrap" id="wrap2"></div>
</div>
JavaScript
asyncTest("Dialog leaves broken event handler when opened from beforeclose-handler of another dialog", function() {
expect( 1 );
$( "#dialog1" ).dialog({ autoOpen: false, modal:true });
$( "#dialog2" ).dialog({ autoOpen: false, modal:true,buttons: [ { text: "Ok", click: $.noop } ] });
$( "#dialog1" ).on( "dialogbeforeclose", function() {
$( "#dialog2" ).dialog( "open" );
setTimeout(function() {
$( "#dialog2" ).dialog( "close" );
setTimeout(function() {
$( "#favorite-animal" ).focusin();
ok( true, "opening a modal dialog from the beforeclose handler of another modal dialog" );
$( "#dialog1" ).dialog( "destroy" );
$( "#dialog2" ).dialog( "destroy" );
start();
}, 2 );
}, 2 );
});
setTimeout(function() {
$( "#dialog1" ).dialog( "open" );
setTimeout(function() {
$( "#dialog1" ).dialog( "close" );
}, 2);
}, 2);
});