jQuery UI dialog focus on first tabable element

I’ve been using the jQuery UI dialog for a project recently, one thing that bugged me though, was that upon opening a dialog the first tabable element always gets focussed. This can be:

• hyperlinks
• input boxes
• select boxes
• buttons
• textareas etc

An example of this is:

A quick way around this is to fire a blur() method, targeting the first tabable element type of your dialog. So if I open up a dialog window with an id of dialog, I can do:

  $('#dialog').dialog('open');
  $('#dialog').find('a, select, input, textarea, button').first().blur();

I was hoping to put this inside the open() method of the dialog, but it doesn’t seem to parse the contents of the dialog within that method. So the following did not work for me:

$('#dialog').dialog({
  autoOpen: false,
  maxWidth: 600,
  minWidth: 500,
  modal: true,
  resizable: false,
  open: function() {
    $(this).find('a, select, input, textarea, button').first().blur();
  }
});