Unable to remove Autofocus in ui-dialog

Question

The first element in my jQuery UI Dialog is an input, which when selected opens a datepicker...

How can I disable this input from being selected first?

Do you have a test page? or Create a [fiddle](http://jsfiddle.net) showing your case — Starx, Mar 22 '12 at 06:22

score 47 · Answer 1 · answered Aug 16 '13 at 15:30

47

Add the following code before you call dialog. This will clear out the autofocus code. It works for me in jquery 2.0.3.

$.ui.dialog.prototype._focusTabbable = function(){};

answered Aug 16 '13 at 15:30

LaXDragon

thank you - this helped my problem of the dialog always going back to the first element, not just on open – Adam Mar 27 '14 at 14:11
great. I currently need to mix jqueryUI and bootstrap, and the use a lot of dialogs without inputs, which caused all my first dialog buttons to have the hover state, and hence look broken. This solves that issue – kabal Aug 14 '14 at 14:19
1

It requires jQuery _UI_ 1.10 or higher – Salman A Sep 11 '14 at 09:38
It's kludgey, but it does the trick nicely. Thanks for saving me what would have likely been a tonne of time. – AJB Oct 18 '15 at 07:20
This should be the accepted answer. Works for me – Linga Oct 26 '15 at 07:02
Thank you so much!! I was crazy! – Héctor Ortiz Dec 23 '15 at 05:00
Warning: when the dialog pops up, pressing the Escape key won't close the dialog (until you focus the dialog). – Robert Jul 27 '16 at 07:07
Thank you! this helped my problem to focus on other div – Gopal Rathod Aug 24 '23 at 13:04

score 9 · Answer 2 · edited May 23 '17 at 12:09

9

Very simple, just trigger the blur event on the input elements when the dialog box opens.

$("#dialog").dialog({
    open: function(event, ui) {
        $("input").blur();
    }
});

_{NOTE: For more in-depth solution to this problem, read this answer too.}

edited May 23 '17 at 12:09

Community

answered Mar 23 '12 at 05:58

Starx

2

Unfortunately this doesn't work when dealing with a dialog that has autoOpen: false. http://jsfiddle.net/8VbEU/134/ – Wulfhart Mar 28 '14 at 19:04

score 5 · Answer 3 · edited Dec 12 '12 at 15:50

5

JQuery sets the autofocus on the first input that is found.
So play it sneaky by creating a "fake" input at the first line of your dialog like that:

<input type='text' size='1' style='position:relative;top:-500px;' />

So your input will be out of the window and have the focus. Problem solved for me ;p

edited Dec 12 '12 at 15:50

Michael Myers

answered Dec 12 '12 at 15:24

kts

3 Answers3