ui-autocomplete select event not fired on mouse click

ui-autocomplete select event not fired on mouse click

dear all,
 
i am using JQuery UI v1.11.0

my autocomplete is working fine, except this case :

when i click on a menu item, "select" event is never fired, unless i click exactly on the text within the item.. only then the item is clicked, and "select" is fired

 
here is my code for creating autocomplete: 

  1. function CreateAutoComplete(sourceArray, labelTextBox, idTextBox) {
 
    $("#" + labelTextBox).autocomplete({ source: sourceArray,
 
        open: function (event, ui) {
 
            $(this).autocomplete("widget")
  2.             .find(".ui-menu-item")
  3.             .css({ "width": "300px" });

  5.              $(this).autocomplete("widget")
  6.             .find(".ui-menu-item").bgiframe();
        },
 
        focus: function (event, ui) {
          
            $("#" + labelTextBox).val(ui.item.label);
            $("#" + idTextBox).val(ui.item.value);
            return false;
        },
 
        change: function (event, ui) {
            if (ui.item == null) {
                $("#" + labelTextBox).val("");
                $("#" + idTextBox).val("");
            }
        },
 
        select: function (event, ui) {
            $("#" + labelTextBox).val(ui.item.label);
            $("#" + idTextBox).val(ui.item.value);
            return false;
        } 
 
    });
 
} // function

if i comment out this line, autocomplete works fine, and "select" is fired on mouse click:

  1. $(this).autocomplete("widget").find(".ui-menu-item").bgiframe();

 
but i need this line to solve the z-index issue of autocomplete on IE6 !


if i keep the bgiframe command, and comment out this line:

  1. $(this).autocomplete("widget").find(".ui-menu-item").css({ "width": "300px" });

i get this behavior:

     
 
thanx