Question

I have an .on(“click”… event for my select that opens a dialog.

The problem is that the opening of the dialog closes the select that the user has just clicked.

How can I stop this closing of the select list? I am testing on FF16 and jqueryui 1.9

Here is an example and JSfiddle of the problem: http://jsfiddle.net/HqfvP

$(function(){
  $('#theDialog').dialog( {
      autoOpen : false,
      resizable : false,
      stack : false, position: ['right','center']
  });
  $("#theSelect").on("click", function(){
      $(".ui-dialog-content").dialog("close");//closes all open dialogs
      $('#theDialog').dialog("open");
  });
});

Answer 1

The reason the select options close is because .dialog("open") automatically sets focus to an element on the dialog. Not wanting to set focus on a newly opened dialog is an unusual use case, so you’ll have to do some customization: http://jsfiddle.net/HqfvP/3/

The linked code looks like it might have been a lot of work, but really wasn’t terribly hard to come up with:
1. Extend the jQuery dialog like this:

$.widget("ui.my_dialog", $.ui.dialog, { 
});

1. Change all of the .dialog references to .my_dialog
2. Copy the open function from the jQuery UI source into my new object.
3. (Optional) Rename open to open_nofocus (or something else) and update uses of open.