Search code examples
jqueryjquery-uicomboboxjquery-ui-autocomplete

jQuery combobox (with autocomplete) scrolls to top in IE

I'm having strange behavior with the jQuery combobox. The combobox isn't a regular jQuery plugin but can be achieved with the autocomplete plugin. They have an example on the jQuery ui site.

I've styled the autocomplete to have a maximum height and a scrollbar:

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

This gives me a working example as seen in this jsFiddle. The style is all I added. In Chrome and Firefox, everything keeps working.

In IE10, it works, but the first time you scroll (clicking on the down arrow), it seems to select the first item and scrolls up again. After that, you can continue working normally.

What could be causing this behavior and is it fixable?

EDIT

I'm suspecting it's a bug of some kind. When I use jQuery 1.7.1 and jQuery UI 1.8.16, it works (as you can see in this fiddle). But with jQuery 1.10.3 and jQuery UI 1.9.1, I have the problem described above.

EDIT 2

Apparently, this is not a bug in the combobox code. As far as I can see, it was introduced going from jQuery UI 1.8 to 1.9. I have filed a bug.

Solution

  • This has been fixed in jQuery 1.12.2. If you're still on a 1.x version, I recommend upgrading because 1.x and 2.x are no longer receiving updates.