#8875 closed bug (worksforme)

Opened November 30, 2012 08:45PM UTC

Closed November 30, 2012 09:33PM UTC

Last modified November 30, 2012 10:12PM UTC

Autocomplete vertical scroll-to-top bug

Reported by:	jjtroberts	Owned by:	jjtroberts
Priority:	minor	Milestone:	1.10.0
Component:	ui.autocomplete	Version:	1.9.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

Hovering over the very top or bottom of a scrollable suggestion list (using max-height) causes the menu to scroll. This is visible in the maxheight demo.

Attachments (0)

Change History (11)

Changed November 30, 2012 08:57PM UTC by scottgonzalez comment:1

description:	Under 1.9.2 CSS, when the number of results from autocomplete exceeds max-height AND the user scrolls down the result list, whenever the mouse hovers over a result item the result list jumps back to the top making it impossible to scroll down and select an item from the list. \ \ I removed jquery-ui-1.9.2.custom.min.css and replaced it with jquery-ui-1.8.23.custom.css and the problem went away. \ \ Pertinent code is below: \ \ \ {{{ \ $('#search').autocomplete({ \ source: "<?php echo Router::url(array('controller' => 'Residents','action' => 'Search')); ?>", \ minLength: 2, \ select: function( event, ui ) { \ var ResidentControllers = new Array( \ "Residents","Accounts","EmergencyContacts","Notifications","TransportationPasses" \ ); \ var controller = "<?php echo $this->name; ?>"; \ var action = "<?php echo $this->action; ?>"; \ if(ResidentControllers.indexOf(controller) != -1){ \ location.href="<?php echo Router::url(array('controller' => '"+controller+"','action' => '"+action+"')); ?>/"+ui.item.value; \ }else{ \ location.href="<?php echo Router::url(array('controller' => 'Residents','action' => 'Edit')); ?>/"+ui.item.value; \ } \ return false; \ }, \ open: function(){ \ $(this).autocomplete('widget').css('z-index', 9999999999999999); \ return false; \ } \ }).data("autocomplete")._renderItem = function(ul, item){ \ if(item.value){ \ var imageUrl = "<?php echo $this->Html->webroot('img/residents/'); ?>"; \ return $( "<li></li>" ) \ .data( "item.autocomplete", item ) \ .append( \ "<a class=\\"uiasearchitem\\" style=\\"float:left;\\">"+ \ "<div style=\\"float:left;\\">"+ \ "<img class=\\"avatar\\" width=\\"80px\\" height=\\"60px\\" src=\\""+imageUrl+item.filename+"\\" />"+ \ "</div>"+ \ "<div class=\\"username\\" style=\\"font-size:10px;float:left;clear:right;width:240px;\\">"+item.name+"</div>"+ \ "<div class=\\"laststay\\" style=\\"font-size:10px;float:left;clear:right;width:240px;\\">"+item.last_stay+"</div>"+ \ "<div class=\\"bars\\" style=\\"font-size:10px;float:left;clear:right;width:240px;\\">No Bars</div>"+ \ "</a>" \ ).appendTo( ul ); \ }else{ \ return $( "<li></li>" ) \ .data( "item.autocomplete", item ) \ .append(item.message) \ .appendTo( ul ); \ } \ }; \ }}} → Hovering over the very top or bottom of a scrollable suggestion list (using max-height) causes the menu to scroll. This is visible in the maxheight demo.

description:

Under 1.9.2 CSS, when the number of results from autocomplete exceeds max-height AND the user scrolls down the result list, whenever the mouse hovers over a result item the result list jumps back to the top making it impossible to scroll down and select an item from the list. \ \ I removed jquery-ui-1.9.2.custom.min.css and replaced it with jquery-ui-1.8.23.custom.css and the problem went away. \ \ Pertinent code is below: \ \ \ {{{ \ $('#search').autocomplete({ \ source: "<?php echo Router::url(array('controller' => 'Residents','action' => 'Search')); ?>", \ minLength: 2, \ select: function( event, ui ) { \ var ResidentControllers = new Array( \ "Residents","Accounts","EmergencyContacts","Notifications","TransportationPasses" \ ); \ var controller = "<?php echo $this->name; ?>"; \ var action = "<?php echo $this->action; ?>"; \ if(ResidentControllers.indexOf(controller) != -1){ \ location.href="<?php echo Router::url(array('controller' => '"+controller+"','action' => '"+action+"')); ?>/"+ui.item.value; \ }else{ \ location.href="<?php echo Router::url(array('controller' => 'Residents','action' => 'Edit')); ?>/"+ui.item.value; \ } \ return false; \ }, \ open: function(){ \ $(this).autocomplete('widget').css('z-index', 9999999999999999); \ return false; \ } \ }).data("autocomplete")._renderItem = function(ul, item){ \ if(item.value){ \ var imageUrl = "<?php echo $this->Html->webroot('img/residents/'); ?>"; \ return $( "<li></li>" ) \ .data( "item.autocomplete", item ) \ .append( \ "<a class=\\"uiasearchitem\\" style=\\"float:left;\\">"+ \ "<div style=\\"float:left;\\">"+ \ "<img class=\\"avatar\\" width=\\"80px\\" height=\\"60px\\" src=\\""+imageUrl+item.filename+"\\" />"+ \ "</div>"+ \ "<div class=\\"username\\" style=\\"font-size:10px;float:left;clear:right;width:240px;\\">"+item.name+"</div>"+ \ "<div class=\\"laststay\\" style=\\"font-size:10px;float:left;clear:right;width:240px;\\">"+item.last_stay+"</div>"+ \ "<div class=\\"bars\\" style=\\"font-size:10px;float:left;clear:right;width:240px;\\">No Bars</div>"+ \ "</a>" \ ).appendTo( ul ); \ }else{ \ return $( "<li></li>" ) \ .data( "item.autocomplete", item ) \ .append(item.message) \ .appendTo( ul ); \ } \ }; \ }}} → Hovering over the very top or bottom of a scrollable suggestion list (using max-height) causes the menu to scroll. This is visible in the maxheight demo.

Changed November 30, 2012 08:58PM UTC by scottgonzalez comment:2

owner:	→ jjtroberts
status:	new → pending

Please do not dump large blocks of code into the ticket, especially code that cannot be run by anyone but yourself.

I'm not sure this is a bug; generally when a menu contains too many options, moving to the very top or bottom of the menu will cause it to scroll. Are you seeing something other than the behavior I describe in the updated description?

Changed November 30, 2012 09:02PM UTC by jjtroberts comment:3

status:	pending → new

It doesn't happen just at the very top or bottom. It happens at any height in the list. If I position my mouse cursor over the scrollbar and use the wheel to scroll down, it will scroll correctly, but the moment I try to mouse over a list item the entire list snaps back to the top.

Changed November 30, 2012 09:04PM UTC by scottgonzalez comment:4

status:	new → pending

What browser are you seeing that happen in? Are you seeing the same behavior on http://view.jqueryui.com/master/demos/autocomplete/maxheight.html ?

Changed November 30, 2012 09:06PM UTC by jjtroberts comment:5

status:	pending → new

I have seen it in both Firefox 16.0 and Chrome 23.0.1271.95 m; and it does not mimic the behavior on the demo. Could it be a problem with the width of each list item in the suggestion list?

Changed November 30, 2012 09:09PM UTC by scottgonzalez comment:6

status:	new → pending

Can you provide a reduced test case showing the problem? You can use http://jsfiddle.net/ZgAqH/Open/ as a starting point.

Changed November 30, 2012 09:11PM UTC by jjtroberts comment:7

status:	pending → new

I'd like to do that, but I don't see how to use the 1.9.2 version of jquery at jsFiddle. They seem to stop at 1.8.2

Changed November 30, 2012 09:13PM UTC by scottgonzalez comment:8

status:	new → pending

The fiddle link I sent is already set up to use jQuery UI git (current master). It's linked from the Manage Resources panel on the right. Just add the relevant markup in the HTML section (just the contents inside <body>, don't put a full document in there) and whatever custom CSS/JS you need to reproduce the problem. Try to get it stripped down as much as possible.

Changed November 30, 2012 09:23PM UTC by jjtroberts comment:9

_comment0:	Will this work? http://jsfiddle.net/jjtroberts/Kn45F/ → 1354311089462312
_comment1:	http://jsfiddle.net/jjtroberts/Kn45F/3/ \ \ Tried to strip it down as much as possible. → 1354312105232690
status:	pending → new

http://jsfiddle.net/jjtroberts/Kn45F/5/

Tried to strip it down as much as possible.

Changed November 30, 2012 09:33PM UTC by scottgonzalez comment:10

resolution:	→ worksforme
status:	new → closed

No, a few thousand lines of markup is certainly not a reduced test case. I'm going to close this since it works in our demo. Please use the forums or StackOverflow for support. If you can reduce this and there actually is a bug in jQuery UI, please report a new bug with the reduced test case.

Changed November 30, 2012 10:12PM UTC by jjtroberts comment:11

_comment0:	Well, my lack or prowess at jsFiddle not withstanding, I managed to find the solution on my end. Perhaps this can help someone else with a similar problem in the future. \ \ The problem was being caused by floats withing the suggestion list. I removed the floats and autocomplete works as expected. Guess I'll have to resort to tables. → 1354313559456938

Well, my lack of prowess at jsFiddle not withstanding, I managed to find the solution on my end. Perhaps this can help someone else with a similar problem in the future.

The problem was being caused by floats withing the suggestion list. I removed the floats and autocomplete works as expected. Guess I'll have to resort to tables.

Search and Top Navigation