JQuery UI autocomplete: unwanted automatic focus on open

Whenever my mouse hovers over where the autocomplete dropdown eventually opens, the focus event is triggered for the item that appears under the mouse pointer. This leads to some pretty confusing behaviour for the user, when the text that is being typed into the input box is suddenly replaced by an item from the dropdown.

Anyone know if there is a way to avoid this?

Update:

Seems this only happens in Firefox (at least in v6.0, on Linux). In Chrome, I do not see this behaviour. So.. JQuery bug?

I've added the code below.

The javascript:

$(function() {
    $( "#query" ).autocomplete({
        source: 'http://localhost:3000/autocomplete',
        minLength: 2,
        focus: function( event, ui ) {
            if (typeof ui.item != 'undefined') { // undefined when last item in results
                value = ui.item.name;

                // For some search results (county, municipality) we add extra info
                // to the query to ensure exact match
                if (ui.item.extra_info != "") {
                    value += ", " + ui.item.extra_info;
                }
                $( "#query" ).val( value );
            }

            return false;
        },
        select: function( event, ui ) {
            if (typeof ui.item != 'undefined') { // undefined when last item in results
                value = ui.item.name;

                if (ui.item.extra_info != "") {
                    value += ", " + ui.item.extra_info;
                }

                $( "#query" ).val( value );
            }

            $( "#search_form" ).submit();
            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {

        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.name + "</a>" )
            .appendTo( ul )}
});

    $.widget( "custom.autocomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var self = this,
                currentCategory = "";

            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }

                self._renderItem( ul, item );

            });
                    ul.append("<hr>");
                    $("<li><a>Search for all hits on \"" + this.term + "\"</a></li>")
                        .appendTo(ul);
   开发者_如何学运维     }
    });

The form:

<form accept-charset="UTF-8" action="/sok" id="search_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
<div class="ui-widget">
  <input class="ui-autocomplete-input" id="query" name="query" type="text" value="" />
  <input name="commit" type="submit" value="Search" />
</div>
</form>