jQuery UI Focus Stealing

jquery, jquery-ui, modal-dialog

Solution

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();
                        }
                    });
                }
            });
        }

Problem

Whenever I type something in the following Insert Hyperlink text input, all the words are going to `textarea` behind it. OK and Cancel buttons are working fine but I cannot focus to text input. We'are using jQuery UI 1.10.1. It was working nicely with previous version of jQuery which was 1.8.x. I've checked code behind of jQuery and it has the following methods called when opening a Modal Dialog: ``` _focusTabbable: function () { // Set focus to the first match: // 1. First element inside the dialog matching [autofocus] // 2. Tabbable element inside the content element // 3. Tabbable element inside the buttonpane // 4. The close button // 5. The dialog itself var hasFocus = this.element.find("[autofocus]"); if (!hasFocus.length) { hasFocus = this.element.find(":tabbable"); } if (!hasFocus.length) { hasFocus = this.uiDialogButtonPane.find(":tabbable"); } if (!hasFocus.length) { hasFocus = this.uiDialogTitlebarClose.filter(":tabbable"); } if (!hasFocus.length) { hasFocus = this.uiDialog; } hasFocus.eq(0).focus(); }, _keepFocus: function (event) { function checkFocus() { var activeElement = this.document[0].activeElement, isActive = this.uiDialog[0] === activeElement || $.contains(this.uiDialog[0], activeElement); if (!isActive) { this._focusTabbable(); } } event.preventDefault(); checkFocus.call(this); // support: IE // IE <= 8 doesn't prevent moving focus even with event.preventDefault() // so we check again later this._delay(checkFocus); }, ``` that is taken from here: http://code.jquery.com/ui/1.10.1/jquery-ui.js

Original source