Opened 13 years ago

Closed 13 years ago

Last modified 10 years ago

#5469 closed bug (duplicate)

jQuery UI AutoComplete 1.8 - Menu item click does not always fire

Reported by: klaptrap Owned by:
Priority: blocker Milestone:
Component: ui.autocomplete Version: 1.8
Keywords: Cc:
Blocked by: Blocking:

Description

Using version 1.8 of Jquery UI.

When using the autocomplete widget the mouse click event on the ddl menu item does not always fire. Subsequently the underlying ddl does not update.

It would appear that the menu item always responds to selection using the ENTER key but not always using the mouse click. This sadly provides a userability issue with this widget.

Sadly I have not time to solve myself.

Attachments (3)

genericTimesheet.js (4.7 KB) - added by klaptrap 13 years ago.
jquery.ui.autocomplete.js (14.7 KB) - added by klaptrap 13 years ago.
Index.aspx (8.6 KB) - added by klaptrap 13 years ago.

Download all attachments as: .zip

Change History (7)

comment:1 Changed 13 years ago by Scott González

Resolution: worksforme
Status: newclosed

Can't reproduce.

Changed 13 years ago by klaptrap

Attachment: genericTimesheet.js added

Changed 13 years ago by klaptrap

Attachment: jquery.ui.autocomplete.js added

Changed 13 years ago by klaptrap

Attachment: Index.aspx added

comment:2 Changed 13 years ago by eirikwah

Resolution: worksforme
Status: closedreopened

Please consider re-opening this bug.

I am also experiencing this bug when clicking slowly. This is how to reproduce:

  • Use browser Firefox 3.5 or IE8 (not tested with other browsers).
  • Use demo at http://jqueryui.com/demos/autocomplete/default.html[[BR]]
  • Click in textbox and type "a" (without quotes). This will display "Java" and "Javascript".
  • Position the mouse-pointer above "Java" (bug is independent of what element you select)
  • Press AND HOLD left mouse button for more than 150 milliseconds, for example for 2 seconds
  • Observe that the autocomplete-menu is hidden before any selection is registered, and therefore no selection is done when you release the mouse button (to complete the slow click)

I have created a workaround for myself. It is to register an event-handler for "mousedown" on the ui-menu that is exactly as "click". The disadvantage with this workaround is that selection is very quick, so the end-user may be a bit surprised... The workaround is:

$.widget("ui.menu", {
	_create: function() {
		var self = this;
		this.element
			.addClass("ui-menu ui-widget ui-widget-content ui-corner-all")
			.attr({
				role: "listbox",
				"aria-activedescendant": "ui-active-menuitem"
			})
			.click(function( event ) {
				if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
					return;
				}
				// temporary
				event.preventDefault();
				self.select( event );
			})
			.mousedown(function( event ) { // Bugfix by Eirik Wahl: Select element on mousedown (and not only on click) to do a select before blur on the autocomplete-menu (whick happens after 150 milliseconds).
				if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
					return;
				}
				// temporary
				event.preventDefault();
				self.select( event );
			});
		this.refresh();
	},


comment:3 Changed 13 years ago by Jörn Zaefferer

Resolution: duplicate
Status: reopenedclosed

Duplicate of #5405.

comment:4 Changed 10 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.