#7024 closed bug (fixed)

Opened February 20, 2011 01:55PM UTC

Closed May 18, 2012 07:55PM UTC

Autocomplete menu options are activated even if mouse is not moved

Reported by:	lex1982	Owned by:
Priority:	minor	Milestone:	1.9.0
Component:	ui.autocomplete	Version:	1.8.9
Keywords:		Cc:
Blocked by:		Blocking:

Description

When the autocomplete menu opens and the mouse is over one option -- that is just appearing --, this option is activated even if the user does not move the mouse.

While this is usually not a severe bug when the user is forced to select one of the autocomplete options, it is pretty annoying when the options are just suggestions and the user may enter an arbitrary text (and for example submit it by pressing ENTER). Then, it happens very often that options are accidently selected because they were automatically activated.

The only solution I found that works in all browsers is not to use the mouseenter event for the menu options but mousemove. It has to be checked in the event handler if the mouse was really moved (mouse coordinates have to be saved each time the menu or a menu option is activated). Since mousemove is fired very often it should be additionally checked if the hovered menu item is already selected to avoid unnecessary activate()-calls.

The bug can be easily reproduced here:

http://jqueryui.com/demos/autocomplete/

Just position the mouse below the input and type something.

Attachments (0)

Change History (8)

Changed February 20, 2011 02:01PM UTC by lex1982 comment:1

I just noticed this is very similar to http://bugs.jqueryui.com/ticket/6218. 6218 is just a particular consequence of this bug.

Changed February 20, 2011 02:03PM UTC by scottgonzalez comment:2

#6218 is a duplicate of this ticket.

Changed February 20, 2011 02:04PM UTC by scottgonzalez comment:3

Ensure that when this is fixed the scrolling issue described in #6218 is fixed as well.

Changed April 17, 2011 06:59PM UTC by lschult2 comment:4

_comment0:	FYI, this is a workaround that seems to work for me. I put this into my code to redefine the activate method of ui.menu and the search method of ui.autocomplete. \ \ $.widget("ui.menu", $.ui.menu, { \ activate: function( event, item ) { \ var lastX = $('ul.ui-autocomplete').data('lastPageX'); \ var lastY = $('ul.ui-autocomplete').data('lastPageY'); \ if (!event.pageX && !event.pageY \|\| lastX && lastY) { \ // regular activate code from jquery.ui.autocomplete put here \ } \ $('ul.ui-autocomplete').data('lastPageX', event.pageX); \ $('ul.ui-autocomplete').data('lastPageY', event.pageY); \ } \ }); \ \ $.widget("ui.autocomplete", $.ui.autocomplete, { \ search: function( value, event ) { \ $('ul.ui-autocomplete').data('lastPageX', 0); \ $('ul.ui-autocomplete').data('lastPageY', 0); \ // regular search code from jquery.ui.autocomplete put here \ }); → 1303066864911984

_comment0:

FYI, this is a workaround that seems to work for me. I put this into my code to redefine the activate method of ui.menu and the search method of ui.autocomplete. \ \ $.widget("ui.menu", $.ui.menu, { \ activate: function( event, item ) { \ var lastX = $('ul.ui-autocomplete').data('lastPageX'); \ var lastY = $('ul.ui-autocomplete').data('lastPageY'); \ if (!event.pageX && !event.pageY || lastX && lastY) { \ // regular activate code from jquery.ui.autocomplete put here \ } \ $('ul.ui-autocomplete').data('lastPageX', event.pageX); \ $('ul.ui-autocomplete').data('lastPageY', event.pageY); \ } \ }); \ \ $.widget("ui.autocomplete", $.ui.autocomplete, { \ search: function( value, event ) { \ $('ul.ui-autocomplete').data('lastPageX', 0); \ $('ul.ui-autocomplete').data('lastPageY', 0); \ // regular search code from jquery.ui.autocomplete put here \ }); → 1303066864911984

FYI, this is a workaround that seems to work for me. I put this into my code to redefine the activate method of ui.menu and the search method of ui.autocomplete.

 $.widget("ui.menu", $.ui.menu, {
  activate: function( event, item ) {
   var lastX = $('ul.ui-autocomplete').data('lastPageX');
   var lastY = $('ul.ui-autocomplete').data('lastPageY');
   if (!event.pageX && !event.pageY || lastX && lastY) {
    // regular activate code from jquery.ui.autocomplete put here
   }
   $('ul.ui-autocomplete').data('lastPageX', event.pageX);
   $('ul.ui-autocomplete').data('lastPageY', event.pageY);
  }
 });

 $.widget("ui.autocomplete", $.ui.autocomplete, {
  search: function( value, event ) {
   $('ul.ui-autocomplete').data('lastPageX', 0);
   $('ul.ui-autocomplete').data('lastPageY', 0);
   // regular search code from jquery.ui.autocomplete put here
  });

Changed May 10, 2011 03:15PM UTC by jzaefferer comment:5

resolution:	→ fixed
status:	new → closed

Fixed by 73ed73890c0e91430a6dc2a01a971f9a4586a6e0 and a63d23c3145a88386b8274e3929630b2416d7f87

Changed May 15, 2011 01:57PM UTC by jzaefferer comment:6

resolution:	fixed
status:	closed → reopened

The fix got reverted, as it caused more damage then fixing issues: https://github.com/jquery/jquery-ui/commit/c17f245d9848ae865d400dabb02ea954aa8da645

The regular menu select event got messed up.

Changed May 15, 2011 06:59PM UTC by k_borchers comment:7

I have submitted a new pull request which should have no effect on the regular menu select event.

https://github.com/jquery/jquery-ui/pull/280

Changed May 18, 2012 07:55PM UTC by kborchers comment:8

resolution:	→ fixed
status:	reopened → closed

Autocomplete: Added check to prevent accidental focus of menu-item on page load in Firefox. Fixed #7024 - Autocomplete menu options are activated even if mouse is not moved.

Changeset: 098dd1404b7b6025a5735495a91ca2b964c5cb3e

Search and Top Navigation