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 and I init the datepicker like this jQue

Answer 1

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.

Answer 2

$('.datepicker').blur();

this would just trigger the blur function just like a use would, therefore the datepicker would hide .

The problem could be because you have set focus on document load somewhere on your script to the first element. so either try and remove that option, or add the above line on document load :)

Answer 3

I have had the exact same problem in the past and I resolved it like this:

 function CreateDialog(divWindow) {
        divWindow.dialog(
            {
                title: "Generate Voyages",
                autoOpen: false,
                modal: true,
                width: 'auto',
                height: 'auto',
                zIndex: -1000,
                resizable: false,
                close: function() {
                    $(this).dialog('destroy');
                    $('#ui-datepicker-div').hide();
                },               
                    "Cancel": function() {
                        $(this).dialog("close");
                        $('#ui-datepicker-div').hide();
                    }
                }
            });
    }

function DisplayWindow(divWindow) {
        divWindow.show()
        divWindow.dialog("open");                

        var datePicker = $('#ui-datepicker-div');

        var textBoxes = $('input[id^="Generate"]');

        datePicker.css('z-index', 10000);

        textBoxes.blur();
    }

Answer 4

I had to disable the datepicker before opening the dialog and enable it upon opening. But, the issue reoccurs after the initial open if you don't disable it upon close, again.

$(document).ready(function () {
    var dialog;

    $("#date").datepicker();
    $("#date").datepicker("disable");

    dialog = $("#dialog-form").dialog({
        autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
        buttons: {
            "Create note": function () {
                $("#noteForm").submit();
            },
            Cancel: function () {
                dialog.dialog("close");
            }
        },
        open: function() {
            $("#date").datepicker("enable");
        },
        close: function () {
            $("#noteForm")[0].reset();
            $("#date").datepicker("disable");
        }
    });

    $("#create-note").button().on("click", function () {
        dialog.dialog('open');
        $("#time").focus();
    });

});

Answer 5

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 6

According to the accepted answer here this is open issue with jQuery UI "core". As suggested there, try setting tab index -1 to the textbox.