jQuery UI Focus Stealing
Second answer I've found is that in the following code jQuery binds document to dialog. So when I unbind this when I click on the desired button's onclick event (or whatever event you're handling):
if (window.jQuery && window.jQuery.ui.dialog) {
$(document).unbind("focusin.dialog");
}
This is where jQuery UI binds it _focusTabble()
method to focusin.dialog
event of document.
if ( !$.ui.dialog.overlayInstances ) {
// Prevent use of anchors and inputs.
// We use a delay in case the overlay is created from an
// event that we're going to be cancelling. (#2804)
this._delay(function() {
// Handle .dialog().dialog("close") (#4065)
if ( $.ui.dialog.overlayInstances ) {
this.document.bind( "focusin.dialog", function( event ) {
if ( !$( event.target ).closest(".ui-dialog").length &&
// TODO: Remove hack when datepicker implements
// the .ui-front logic (#8989)
!$( event.target ).closest(".ui-datepicker").length ) {
event.preventDefault();
$(".ui-dialog:visible:last .ui-dialog-content")
.data("ui-dialog")._focusTabbable();
}
});
}
});
}
What I did to solve this problem is to comment out this $(".ui-dialog:visible:last .ui-dialog-content").data("ui-dialog")._focusTabbable();
You can find the complete code below:
if ( !$.ui.dialog.overlayInstances ) {
// Prevent use of anchors and inputs.
// We use a delay in case the overlay is created from an
// event that we're going to be cancelling. (#2804)
this._delay(function() {
// Handle .dialog().dialog("close") (#4065)
if ( $.ui.dialog.overlayInstances ) {
this.document.bind( "focusin.dialog", function( event ) {
if ( !$( event.target ).closest(".ui-dialog").length &&
// TODO: Remove hack when datepicker implements
// the .ui-front logic (#8989)
!$( event.target ).closest(".ui-datepicker").length ) {
event.preventDefault();
//$(".ui-dialog:visible:last .ui-dialog-content")
//.data("ui-dialog")._focusTabbable();
}
});
}
});
}