jQuery UI - Button inside dialog keeps getting the focus

Question

So I have a jQuery UI dialog with some buttons inside (full example here => http://jsfiddle.net/VLr5G/3/):

<div id="test">
    <button>Btn 1</button>
    <button>Btn 2</button>
    <button>Btn 3</button>
</div>

What I want to do is force the focus on the "Close" button - I have tried applying the following code when the dialog opens:

open: function() {
    $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}

Unfortunately the focus always keeps getting on the first button inside the dialog. Is this a bug, or am I missing something ?

Thanks a lot in advance for your help !

UPDATE

Okay so the answer from Stanley works fine with my first example... But try to change the version of jQuery UI => http://jsfiddle.net/VLr5G/10/

From what I could find so far, it worked until jQuery UI 1.10.0.

Answer 1

You are not getting the close button correctly. You should do this instead:

$(document).ready(function() {
    $('#test').dialog({
        buttons: {
            'Close': function() {$(this).dialog('close');}
        },
        open: function() {
            $(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
        }
    });
});

Working jsfiddle: http://jsfiddle.net/GG7EP/2/

UPDATE To make it work with jQuery 1.10.0 or above, call the button's focus function in focus event

$(document).ready(function() {
    $('#test').dialog({
        buttons: {
            'Close': function() {$(this).dialog('close');}
        },
        focus: function() {
            $(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
        }
    });
});

JsFiddle: http://jsfiddle.net/V3P4t/