jquery ui 1.7 autocomplete show dialog on select

Question

Hello, I am using an autocomplete widget, and would like a dialog to show when an item is selected. The dialog does show up, but I want a field in the dialog to receive focus when it opens. Here is what I have tried so far:

//HTML

<form action="#">
  <p><input id="busca" /></p>
</form>
<div id="agregar" title="Agregar Parte">
  <label for="cantidad">Cantidad:</label>
  <input name="cantidad" id="cantidad" size="3" />
</div>

//jquery

 $(function(){

        $("#agregar").dialog({
                        autoOpen: false,
                        //also tried open: function(){$("#cantidad").focus()}
                        }
              );      
        //.bind("dialogfocus", ... ) does not work either
        $("#agregar").bind("focus", function(){
                   $("#cantidad").focus(); });

    $("#busca").autocomplete({
            source: "/carrito/autocomplete/",
            minLength: 1,
                        select: function(e, ui) {
                          $("#agregar").dialog("open");
                        }
        });


      });

I think autoselect's default behavior is still doing something as the autoselect widget receives focus after the dialog is shown.

Any help would be greatly appreciated.

Answer 1

Try this to override the autocomplete's behavior:

$("#agregar").dialog({
  autoOpen: false,
  open: function(){
      setTimeout(function() { $("#cantidad").focus(); }, 0);
  }
});

This queues the .focus() to run after the select code has run. This is what autocomplete is doing (straight from the source code, line 604): calling your select (and that open function) then stealing focus back:

select();
// TODO provide option to avoid setting focus again after selection? 
// useful for cleanup-on-focus
input.focus();