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

Base on ED and Lev's answers, I got this good solution:

    jQuery("#testDialog").dialog({
        height: 280,
        width: 400,

        open: function () {             
            jQuery(this).closest( ".ui-dialog" ).find(":button").blur();
        }
    });

Answer 2

I stumbled upon a little hack to fix this that others may find useful. A solution like this seems to work for me:

$( "#button" ).click(function() {                                   
    // this is a hack to prevent the focus from remaining after a click
    $(this).toggle(this.checked);                                       
});

It simply programmatically sets it checked again, which seems to clear up the focus issue.

Answer 3

thanks for answers, but it seems to me that the best solution (at least for me, minimal code and no unnecessary use of methods on the DOM) is to define your dialog buttons in an array of object :

buttons: [{
            id  :   "button1",
            text    :   "Button1 text",
            title   :   "tooltip1text1",
            tabIndex:   -1,
            click   :   clickCallback 
        },{
            id      :   "button2",
            text    :   "Button2 text", 
            title   :   "tooltip1text2",
            tabIndex:   -1,
            click   :   function(){$(this).dialog("close")}
        }]

The important part to prevent your buttons to get focus is : tabIntex:-1

It is also a convenient and readable way to give id to your buttons.

Answer 4

buttons: [
    {
        tabIndex: -1,
        text: 'Yes',
        click: function(){
            DeleteStuff();
            $(this).dialog('close');
        }
    },
    {
        text: 'No',
        click: function(){
            // Don't delete
            $(this).dialog('close');
        }
    }
]

This is the only way I got it working. tabIndex: -1 is the solution.

Oh, and I wanted to focus on the second button, so my "Delete Item?" confirmation would by default not delete the item.

Answer 5

I could do this in this way. jquery-ui-1.12.0.custom/jquery-ui.css -> onuline:none add on 896 line ouline:none

.ui-widget button {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 1em;
        outline:none;
    }

Answer 6

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