How to blur the first form input at the dialog opening

Question

I have a jQuery.dialog who show a form.
The first input is <input type="text" class="datepicker" /> and I init the datepicker like this jQuery('.datepicker').datepicker().

The problem is when the dialog is opened, it focus the first input. So the datepicker is also opened.

The dialog's event open is run before the focus is putting on.

So, how can i blur the first focus to the datepicker stay hidden ?

Answer 1

Starting from jQuery UI 1.10.0, you can choose which input element to focus on by using the HTML5 attribute autofocus.

All you have to do is create a dummy element as your first input in the dialog box. It will absorb the focus for you.

<input type="hidden" autofocus="autofocus" />

This has been tested in Chrome, Firefox and Internet Explorer (all latest versions) on February 7, 2013.

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

Answer 2

As mentioned, this is a known bug with jQuery UI and should be fixed relatively soon. Until then...

Here's another option, so you don't have to mess with tabindex:

Disable the datepicker temporarily until the dialog box opens:

dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
    "open": function() {$(this).find(".datepicker").datepicker("enable");},
});

Works for me.