jQuery combobox (with autocomplete) scrolls to top in IE

Question

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.

Answer 1

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.

Answer 2

I have same problem. I filtered problem to _scrollIntoView in jquery.ui.menu.js (Autocomplete uses ui.menu).

_scrollIntoView: function (item) {
    var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight;
    if (this._hasScroll()) {
        borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0;
        paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0;
        offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
        scroll = this.activeMenu.scrollTop();
        elementHeight = this.activeMenu.height(); 
        itemHeight = item.height();
        if (offset < 0) {
            this.activeMenu.scrollTop(scroll + offset);
        } else if (offset + itemHeight > elementHeight) {
            this.activeMenu.scrollTop(scroll + offset - elementHeight + itemHeight);
        }
    }
},

offset is negative in IE, so scroll + offset is always approximate 0. This forces scroll to top. In non-IE offset is positive, so nothing strange happens here.

I fixed it by overwriting _scrollIntoView (see http://jsfiddle.net/KdDfp/9/ )

var menu = $(this.input.autocomplete("widget")).data("ui-menu");
    var originalScrollIntoView = menu._scrollIntoView;
    menu._scrollIntoView = function (item) {
        if (this._hasScroll()) {`enter code here`
            borderTop = parseFloat($.css(this.activeMenu[0], "borderTopWidth")) || 0;
            paddingTop = parseFloat($.css(this.activeMenu[0], "paddingTop")) || 0;
            var offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
            if (offset < 0) {
                // Glitchy 'offset', do nothing.
                return;
            }
        }
        originalScrollIntoView.apply(this, arguments);
    };

Hope this helps.