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 highl

Answer 1

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...

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

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 4

Or, simply creating a dummy input before calling the other buttons works just as well. This works because the UI simply looks for the first "input" as the default, by tricking the UI into seeing a false input first, the focus is redirected.

<div id="dialog-confirm" title="Warning!">
<input type='text' size='0' style='position:relative;top:-500px;' />
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 0 0 0;"></span>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
 amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo.</p>
</div>

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

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

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