Dialog autofocus only works the first time the dialog is opened
I have a "Cancel" button (code below) which just closes the dialog. It has the "autofocus" attribute. My dialog itself (the <div> element it is using) has 5 checkbox inputs. When I open my dialog the first time, my "Cancel" button successfully autofocuses. However, if I close my dialog, then open it again, the first checkbox in the <div> autofocuses, not the "Cancel" button.
How do I get this to focus every time?
What I'm using:
jQuery UI 1.11.2
jQuery UI Smoothness theme 1.11.2
The dialog settings
$("#dialog-form").dialog({
autoOpen: false,
height: "auto",
width: 300,
position: { my: "top center", at: "center center-15%", of: window },
modal: true,
show: { effect: "drop", direction: "up", easing: "easeInQuad", duration: 300 },
hide: { effect: "drop", direction: "up", easing: "easeOutQuad", duration: 300 },
buttons:
[
{
text: "Create Revision",
click: function () {
$.post
(
// ajax call
)
}
},
{
text: "Cancel",
click: function () { $(this).dialog("close"); },
autofocus: true
}
]
});
And the HTML
<div id="dialog-form" hidden="hidden" title="Revision Options">
Choose the options you would like to retain in the new revision:
<table class="dialogTable">
<tr>
<td>
<label>Wiring</label>
<input type="checkbox" id="wiring" checked="checked"/>
</td>
<td>
<label>Hours</label>
<input type="checkbox" id="hours" checked="checked"/>
</td>
<td>
<label>Rates</label>
<input type="checkbox" id="rates" checked="checked"/>
</td>
</tr>
<tr>
<td>
<label>Adjustments</label>
<input type="checkbox" id="adjustments" checked="checked"/>
</td>
<td>
<label>Prices</label>
<input type="checkbox" id="prices"/>
</td>
</tr>
</table>
</div>