Skip to main content

Search and Top Navigation

#9638 closed bug (fixed)

Opened October 29, 2013 12:39PM UTC

Closed January 25, 2017 05:28PM UTC

Last modified January 25, 2017 05:28PM UTC

Autocomplete: Scrolling menu auto selects options in IE

Reported by: peter.morlion Owned by: scottgonzalez
Priority: minor Milestone: 1.12.2
Component: ui.autocomplete Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:
Description

Take the example for an autocomplete combobox (http://jqueryui.com/resources/demos/autocomplete/combobox.html) and everything works.

Now add the following css:

ul.ui-autocomplete {
    max-height: 200px;
    overflow: auto;
}

In IE10, when you open the dropdown, click on the down arrow without moving the cursor inside the list of options (important!), the list will scroll, but the first item will be selected/hovered upon, scroll the list back up. This only happens the first time after opening the dropdown.

I've tested this with jQuery UI 1.10.3 and the problem is present in IE10 (not Chrome or Firefox). You can test this with the following jsFiddle: http://jsfiddle.net/KdDfp/1/

Using jQuery UI .9.1, I cannot reproduce this (although I had to comment out some code from the autocomplete for it to work).

I've tried commenting out pieces of the autocomplete plugin to find the problem, but couldn't find it. So possibly this isn't a bug in the ui.autocomplete component, but in something else (ui.core?).

Attachments (0)
Change History (9)

Changed October 29, 2013 12:59PM UTC by peter.morlion comment:1

_comment0: Further investigation learns me that it has nothing to do with the combobox, but the problem lies with the autocomplete (or jQuery itself): \ \ A working jsFiddle, with jQuery UI 1.8.16: http://jsfiddle.net/xJZvf/3/ \ A jsFiddle with the problem, using jQuery UI 1.9.1: http://jsfiddle.net/xJZvf/2/1383051614373500
_comment1: Further investigation learns me that it has nothing to do with the combobox, but the problem lies with the autocomplete (or jQuery itself): \ \ A working jsFiddle, with jQuery UI 1.8.16: http://jsfiddle.net/xJZvf/3/ \ \ A jsFiddle with the problem, using jQuery UI 1.10.3: http://jsfiddle.net/xJZvf/2/1383051862514943
_comment2: Further investigation learns me that it has nothing to do with the combobox, but the problem lies with the autocomplete (or jQuery itself): \ \ A working jsFiddle, with jQuery UI 1.8.16: http://jsfiddle.net/xJZvf/3/ \ A jsFiddle with the problem, using jQuery UI 1.10.3: http://jsfiddle.net/xJZvf/2/ \ The same problem with jQuery UI 1.9.2: http://jsfiddle.net/xJZvf/4/1383051917469533

Further investigation learns me that it has nothing to do with the combobox, but the problem lies with the autocomplete (or jQuery itself):

A working jsFiddle, with jQuery UI 1.8.16: http://jsfiddle.net/xJZvf/3/

A jsFiddle with the problem, using jQuery UI 1.10.3: http://jsfiddle.net/xJZvf/2/

The same problem with jQuery UI 1.9.2: http://jsfiddle.net/xJZvf/4/

So it must have been introduced from 1.8 to 1.9

Changed October 29, 2013 01:07PM UTC by tj.vantoll comment:2

_comment0: Possibly a duplicate of #9496.1383052110390910
status: newopen
summary: Autocomplete combobox with max-height scrolls up when clicking on down/scroll arrowAutocomplete: Scrolling menu auto selects options in IE

Verified on IE11. Possibly a duplicate of #9496.

Changed October 29, 2013 01:48PM UTC by peter.morlion comment:3

It could be we're talking about the same code here, but initially, I wouldn't say this is a duplicate. The item isn't actually selected.

For example in this fiddle: http://jsfiddle.net/xJZvf/4/

  • Put focus on input
  • Type a
  • move your mouse to the right (never into the dropdown), go down, back left so your cursor is now over the down arrow, but you never entered the dropdown with the items (so you didn't hover over it)
  • click
  • The list scrolls down, then back up again; 'ActionScript' is highlighted, but the content of the input remains 'a'.
  • Click next to the widget: the dropdown disappears, nothing is selected, 'a' remains in the input

Changed October 29, 2013 01:58PM UTC by tj.vantoll comment:4

Yes but if you click enter after the option is highlighted it is selected, which is what #9496 is getting at.

Changed October 29, 2013 02:03PM UTC by peter.morlion comment:5

Replying to [comment:4 tj.vantoll]:

Yes but if you click enter after the option is highlighted it is selected, which is what #9496 is getting at.

Aha, true indeed. Could well be the same then.

Changed July 25, 2014 10:36AM UTC by oodavid comment:6

I've experience what sounds like the same thing using a recent version of Chrome; v 36.0.1985.125 tested, but possibly previous versions are afflicted too.

Using this test rig:

http://jsfiddle.net/oodavid/Yc882/

  • Focus
  • Type 'a' - list appears
  • Tap DOWN - Actionscript is highlighted, list looks OK
  • Tap DOWN again - Actionscript is selected, list collapsed to just one (ERROR)
  • Subsequent taps of DOWN toggle the focus between input and list of one (ERROR)

Demo in animated GIF form:

[[Image(http://imgur.com/UAXb1XH.gif)]]

Changed July 25, 2014 12:18PM UTC by scottgonzalez comment:7

_comment0: Replying to [comment:6 oodavid]: \ > I've experience what sounds like the same thing using a recent version of Chrome; v 36.0.1985.125 tested, but possibly previous versions are afflicted too. \ > \ > Using this test rig: \ > \ > http://jsfiddle.net/oodavid/Yc882/ \ > \ > * Focus \ > * Type 'a' - list appears \ > * Tap DOWN - Actionscript is highlighted, list looks OK \ > * Tap DOWN again - Actionscript is selected, list collapsed to just one (ERROR) \ > * Subsequent taps of DOWN toggle the focus between input and list of one (ERROR) \ > \ > Demo in animated GIF form: \ > \ > [[Image(http://imgur.com/UAXb1XH.gif)]] \ \ Thanks for the very thorough test case, but I'm not seeing this behavior in Chrome 36 on OS X or Windows. Do you see this behavior in other browsers? And could you try this using version 1.11 of jQuery UI instead of 1.10.4. Thanks. \ 1406293556976344

Replying to [comment:6 oodavid]:

I've experience what sounds like the same thing using a recent version of Chrome; v 36.0.1985.125 tested, but possibly previous versions are afflicted too. Using this test rig: http://jsfiddle.net/oodavid/Yc882/

Thanks for the very thorough test case, but I'm not seeing this behavior in Chrome 36 on OS X or Windows. Do you see this behavior in other browsers? And could you try this using version 1.11 of jQuery UI instead of 1.10.4. Thanks.

Changed January 25, 2017 05:28PM UTC by scottgonzalez comment:8

owner: → scottgonzalez
resolution: → fixed
status: openclosed

In [changeset:"573e7e69c9b63752fb06a15d60ec2dded839e093" 573e7e6]:

#!CommitTicketReference repository="" revision="573e7e69c9b63752fb06a15d60ec2dded839e093"
Autocomplete: Fix IE/Edge scrolling issues

IE11 and scrolling autocompletes didn't get along great; this should help fix
their relationship.

When you click on an autocomplete scrollbar in IE11, the menu temporarily
gains focus, which caused a couple problems.

1. Depending on how long you clicked, the dropdown could close.

2. Scrolling down by clicking the scrollbar's down arrow would misbehave. The
list would pop back up to the top with the first item selected.

We can fix both problems by modifying the focus/blur handling a bit.

1. There is a flag to instruct the control to ignore blurs, but it was getting
cleared too quickly; when the code refocused the input after it was blurred,
IE would send *another* blur event, which wasn't getting ignored and would
close the dropdown. We now wait for the focus/blur pair to process before
clearing the flag.

2. We remove the tabindex from the dropdown menu, which prevents menu's focus
handler from firing. When you focus a menu, it will select the first menu item
if none are selected. Selecting a menu item will scroll it into view if it's
not visible. This combination of behaviors was causing the strange behavior
when attempting to scroll down.

I couldn't figure out a way to write a unit test for this, since it's IE only
and seems to require user interaction. You can verify the previous behavior
(and the fix) on 

Fixes #9638
Closes gh-1785

Changed January 25, 2017 05:28PM UTC by rjollos comment:9

milestone: none1.12.2