tabbing not working properly in jquery dialog

Question

i have a jquery dialog with this configuration:

$("#someForm").dialog({

    modal: true,
    title: 'Registration',
    resizable: false,
    draggable: false
});

$("#someForm").dialog( "option", "buttons", {
    "Sign Up": function() {
        doSomething();
        $(this).dialog("close");
     },
    "Cancel": function() {
        $(this).dialog("close");
     }

} );

$("#afieldintheform").focus();

when i press the TAB key it tabs through the inputs fine, but it doesn't reach the cancel or sign up button and instead tabs to the browser's address bar...

any help is greatly appreciated!

thanks.

Answer 1

The example at http://jqueryui.com/demos/dialog/#modal-form works fine.

Try to initialize it like the following:

    $("#someForm").dialog({
        modal: true,
        title: 'Registration',
        resizable: false,
        draggable: false,
        buttons: {
             "Sign Up": function() {
                 doSomething();
                 $(this).dialog("close");
             }, 
             "Cancel": function() {
                 $(this).dialog("close");
             }
        }
  });

What version of jQuery are you using? What browser?