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 ?

silkfire · Answer 1 · 2014-01-27T14:44:31.897

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

score 6 · Accepted Answer · answered Mar 24 '11 at 18:45

6

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.

answered Mar 24 '11 at 18:45

BMiner

16,669
12
53
53

1

This was the direction I needed to fix my issue. In the end I had to add the datepicker("disable") on close function for the dialog, as well. This prevented the issue from reoccurring after subsequent opening of the dialog. – Khaneliman Mar 23 '17 at 01:16

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

2

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.

edited May 23 '17 at 12:17

Community

1
1

answered Mar 24 '11 at 11:17

Shadow The GPT Wizard

66,030
26
140
208

score 1 · Answer 4 · answered Mar 24 '11 at 11:14

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

Just adding that textBoxes, in this case, are the textboxes where my datepickers are implemented. Just set the zindex of the boxes after opening your dialog and blur them afterwards. — Hallaghan, Mar 24 '11 at 11:20

score 0 · Answer 5 · answered Mar 23 '17 at 01:18

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

});

score 0 · Answer 6 · answered Mar 24 '11 at 11:12

0

$('.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 :)

answered Mar 24 '11 at 11:12

Val

17,336
23
95
144

Automatic when the dialog is open. I found a solution, i post it soon – canardman Mar 24 '11 at 14:44
@canardman: I don't mean any offense to you but mind you telling us why you keep posting questions only to later answer them yourself? If the question could be solved with just a little more work or research, why do you post it only to vote your own answer as the right one? I checked and in most of your questions, you did just that. – Hallaghan Mar 24 '11 at 15:02
@hallaghan lol he is one of them developers who says my way or the high way, :) @canardman I know its automatic I was hoping for a code that triggers it's focus – Val Mar 24 '11 at 17:08
@hallaghan @Val Not my way but you're right, in some of post unfortunatly i can't have the solution to my question. So when i found a way to solve it, i share it. But surely, if anyone suggest a better solution, i would be happy to learn it. And that is the reason why i post here, i want to understand and learn. – canardman Mar 25 '11 at 07:35

How to blur the first form input at the dialog opening

6 Answers6

Linked