Jquery UI Autocomplete doesn't allow options to be selected with mouse anymore

Question

I recently updated jquery ui and its autocomplete plugin - however in the newer version it won't let me select the options with a mouse click and I have to use the up and down arrows. How do I re-enable selection via mouse click?

Btw the new version is 1.9.1, old version was 1.8.2

Answer 1

In my case the mouse selection capability was disabled by an outdated third party jQuery plugin. This thread gave me an idea of what might be wrong: http://forum.jquery.com/topic/autocomplete-click-to-select-item-not-working-in-1-9-1

I was using an old version of jquery validation plugin (https://github.com/jzaefferer/jquery-validation). I disabled one plugin after another to see which was causing the misbehaviour.

Answer 2

I had the same issue, even using the latest version of jquery-ui available at the time 1.11.4

Checking the source code in file jquery-ui.js I found a piece like this:

"click .ui-menu-item": function( event ) {
                    var target = $( event.target );
                    if ( !this.mouseHandled && target.not( ".ui-state-disabled" ).length ) {
                        this.select( event );

                        // Only set the mouseHandled flag if the event will bubble, see #9469.
                        if ( !event.isPropagationStopped() ) {
                            this.mouseHandled = true;
                        }

The problem is the mouseHandled var set to true. But it only happens if the event propagation hasn't been stopped.

So as the solution I defined my autocomplete like this:

$('.autocomplete').autocomplete({
  source: ['value1','value2','value3','value4'], //my source
  select: function(event, ui){
    event.stopPropagation(); //the select event will work next time you click
    //your logic comes here ...
  }
})

It worked for me, I hope it works for you! =)