Question

I have defined focus event of a form field to open a Jquery UI dialog with options to select. I want that focus should stay on same field for un-interrupted data entry. My requirement is just like as shown by datepicker, user sees datepicker overlay but focus stays on date field so that user can continue to type in the date.

Here is code for relevant field and dialog.

$( "#pmt_code" ).focus(function(){
    $( "#pmtcodes" ).dialog( "open" );
    // Keep focus stayed on this field somehow
  });


$( "#pmtcodes" ).dialog({
    autoOpen: false,
    position: { my: "left top", at: "left bottom", of: $("#pmt_code") },
    closeOnEscape: true,
    open: function(){
      listPmtCodes();
    }        
  });

Here is the Dialog Div with table. I am populating this table using jquery datatable plugin.

<div id="pmtcodes" title="payment Codes">
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="pmtCodesTable">
        <thead>
          <tr>
            <th>Code</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>        
    </div>

Answer 1

You must set the focus to your control again on the open callback:

var $pmt_code = $("#pmt_code"),
    $pmtcodes = $("#pmtcodes");

$pmt_code.focus(function(){
    !$pmtcodes.dialog( "isOpen" ) && $pmtcodes.dialog( "open" );
});

$pmtcodes.dialog({
    autoOpen: false,
    position: { 
        my: "left top", 
        at: "left bottom", 
        of: $pmt_code 
    },
    closeOnEscape: true,
    open: function(){
        listPmtCodes();
        setTimeout(function () { // Workaround for Internet Explorer
            $pmt_code.focus(); //<---- Keep focus stayed on this field somehow
        }, 10);
    }
 });

I just changed the code a little to avoid searching on DOM more then once for each element.

You also need to implements the keyup event to catch the ESC pressed to close the dialog:

$pmt_code.keyup(function (e) {
    if (e.keyCode == 27 && $pmtcodes.dialog("isOpen")) // ESC pressed
    {
        $pmtcodes.dialog("close");
    }
});

Check one live here: http://jsfiddle.net/9KuVA/

I hope this can helps