jQuery UI dialog button focus

Question

When a jQuery UI dialog opens, it selects one of the buttons and highlights it or sets focus to it etc... How can I stop this behaviour so that none of the buttons are highlighted when the dialog opens?

EDIT: I tried the following in the dialog options, which didn't remove focus from the buttons:

...
open:function(event, ui) { $("myunimportantdiv").focus(); },
...

NOTE: As a temporary workaround I modified the CSS for .ui-state-focus but this isn't ideal...

Answer 1

Well, all solutions here seems to go with code or hacks. So I'll post mine, that is based just in CSS override. What bothered me was the outline that made the button look as "selected", so I simply overrided it with "none":

.ui-dialog .ui-dialog-titlebar button.ui-button:focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-active,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-hover  {
    outline:none;
}

You can also add/override any other style that is bothering you :)

Answer 2

I know the answer has already been selected, but there is a simple HTML solution that I found here a long time ago.

Add the following code as the first element inside the DIV you designate as your dialog.

<span class="ui-helper-hidden-accessible"><input type="text" /></span>

Answer 3

This is what I usually do, works all the time:

open: function() {
    $('.ui-dialog button').removeClass('ui-state-focus');
},

Answer 4

I had this same problem... Trying to set the focus to another element didn't seem to do the trick for me, but blurring focus from the selected element (in the "open" callback) did:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $('#element-that-gets-selected').blur();
        }
    });

I suppose a way to prevent focus without specifying a specific name would be to use a selector with first, like this:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $(this).find('select, input, textarea').first().blur();
        }
    });

Answer 5

Just add this line to remove the autofocus functionality:

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

You can add it in a shared javascript file and it will prevent autofocus of all your dialogs! No more copy and paste in all your dialogs

Answer 6

It's clear focus is causing the jQuery Dialog to scroll to interesting areas when opened. It's referenced just about everywhere now.

blur works, but not if you have a lot of content. if the button is at the bottom of the content, blur will remove the selection, but leave the dialog scrolled to the bottom. using scrollTop scrolled the content to the top, but left the button selected. If a user accidentally hit the return key, the button or link would fire. I chose a combination:

$('#dialog').dialog({
    open: function (event, ui){

        $('a_selector').blur();
        $(this).scrollTop(0); 

    }
});

worked like a champ...