#9638 closed bug (fixed)
Autocomplete: Scrolling menu auto selects options in IE
Reported by: | peter.morlion | Owned by: | Scott González |
---|---|---|---|
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?).
Change History (9)
comment:2 Changed 10 years ago by
Status: | new → open |
---|---|
Summary: | Autocomplete combobox with max-height scrolls up when clicking on down/scroll arrow → Autocomplete: Scrolling menu auto selects options in IE |
Verified on IE11. Possibly a duplicate of #9496.
comment:3 Changed 10 years ago by
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
comment:4 follow-up: 5 Changed 10 years ago by
Yes but if you click enter after the option is highlighted it is selected, which is what #9496 is getting at.
comment:5 Changed 10 years ago by
Replying to 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.
comment:6 follow-up: 7 Changed 9 years ago by
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:
comment:7 Changed 9 years ago by
Replying to 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:
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.
comment:8 Changed 6 years ago by
Owner: | set to Scott González |
---|---|
Resolution: | → fixed |
Status: | open → closed |
In 573e7e6:
comment:9 Changed 6 years ago by
Milestone: | none → 1.12.2 |
---|
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