JQuery UI自动完成不在Firefox中使用箭头键滚动

Question

我正在使用JQuery UI自动完成1.8和JQuery 1.6.1.(在我的公司中获取更新版本的软件非常困难,因此我坚持使用这些软件.)

我在自动完成窗格中放置了一长串字符串,所以我将这样的.ui-autocomplete类设置为样式

.ui-autocomplete {height:200px; overflow-y:scroll; overflow-x: hidden;}

现在,当自动完成下拉列表弹出时,它会根据需要设置滚动条.但是,当我使用箭头键导航下拉列表时,面板不会随选择滚动.选择仍然发生.最后我跑掉了列表的底部,光标返回到顶部.除滚动窗格不滚动外,一切都按预期运行.

在我可以访问其他浏览器的工作之外的测试中,我发现chrome正确滚动并且IE 8正确滚动.这是firefox 3.6 linux浏览器的错误还是我错过了什么？

我被戴上手铐到Firefox 3.6 ua :( Mozilla/5.0(X11; U; Linux i686(x86_64); en-US; rv1.9.2.12)Gecko/20101026 Firefox/3.6.1.2)

这是这个版本的浏览器的错误还是我错过了什么？

编辑:我能够找到一台ie6和一台firefox 3.5.3的机器.ie6滚动和Firefox 3.5.3没有.看来这可能是firefox的一个问题.

Answer 1

在任何浏览器上运行jQuery v1.7.2和jQuery UI v1.8.11的应用程序都有类似的问题.但是我发现它已经修复了jQuery UI v1.8.13 changelog.

所以根据变更集中的修复,我所做的只是覆盖下面的两个函数,它修复了问题.

$.widget("ui.menu", $.extend({ }, $.ui.menu.prototype, {
activate: function (event, item) {
    this.deactivate();
    if (this.hasScroll()) {
        var offset = item.offset().top - this.element.offset().top,
            scroll = this.element.scrollTop(),
            elementHeight = this.element.height();
        if (offset < 0) {
            this.element.scrollTop(scroll + offset);
        } else if (offset >= elementHeight) {
            this.element.scrollTop(scroll + offset - elementHeight + item.height());
        }
    }
    this.active = item.eq(0)
                      .children("a")
                      .addClass("ui-state-hover")
                      .attr("id", "ui-active-menuitem")
                      .end();
    this._trigger("focus", event, { item: item });
},

hasScroll: function () {
    return this.element.height() < this.element[$.fn.prop ? "prop" : "attr"]("scrollHeight");
}}));