JQuery UIのオートコンプリート機能がFirefoxの矢印キーでスクロールしない

Question

JQuery UIオートコンプリート1.8をJQuery 1.6.1で使用しています。 （私はこれらので立ち往生していますので、ソフトウェアの新しいバージョンを取得することは、私の会社では非常に困難である。）

私はオートコンプリートペインに配置された文字列の長いリストを持っているので、私はこの

よう.ui-オートコンプリートクラスのスタイル

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

ここで、オートコンプリートドロップダウンがポップアップすると、必要に応じてスクロールバーが表示されます。ただし、矢印キーを使用してドロップダウンをナビゲートすると、パネルは選択項目とともにスクロールしません。選択はまだ起こります。最終的に私はリストの一番下から抜け出し、カーソルは一番上に戻されます。スクロールペインがスクロールしないことを除いて、すべてが期待どおりに動作します。

私は他のブラウザにアクセスできる仕事以外のテストでは、クロムが適切にスクロールし、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）

これはこのバージョンのブラウザのバグですか、何か不足していますか？

EDIT：私はie6と1を持つマシンを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に固定されていることを知りました。

チェンジセットの修正によれば、私がしたのは以下の2つの関数をオーバーライドして問題を修正しただけです。

$.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"); 
}})); 

Answer 2

解決策： jQuery UI 1.8.18にアップグレードすると、この問題が解決しました。

これは回答ではありませんが、問題に関する詳細情報が表示される場合があります。メニューが開いているときに上または下キーを押したときにコールに従うと、hasScrollメソッドを呼び出すメニューウィジェットのactivateメソッド（Line 5487 v1.8.11を使用）が表示されます。

hasScroll: function() { 
    return this.element.height() < this.element.attr("scrollHeight"); 
}, 

scrollUeight属性がメニューul要素に対して定義されていないため、このメソッドは常にfalseを返すという問題があるようです。ここで

はactivateメソッドです：あなたがtrueを返すようにhasScroll方法を強制する場合であってもscrollTopスプライト属性がどちらかに定義されていないよう

activate: function(event, item) { 
     this.deactivate(); 
     if (this.hasScroll()) { 
      var offset = item.offset().top - this.element.offset().top, 
       scroll = this.element.attr("scrollTop"), 
       elementHeight = this.element.height(); 
      if (offset < 0) { 
       this.element.attr("scrollTop", scroll + offset); 
      } else if (offset >= elementHeight) { 
       this.element.attr("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 }); 
    } 

、あなたは別の問題に遭遇します。

私のアプリケーションにも悩まされているので、これに対する解決策を見つけたらお知らせします。

Answer 3

私はthis.element.attr("scrollHeight")

hasScroll: function() { 
     return this.element.height() < this.element.attr("scrollHeight"); 
    }, 

で戻っ 未定義ことに気づきました。代わりに this.element.attr("scrollHeight")を this.element.prop("scrollHeight")に変更すると、scrollHeightが表示されます。

しかし、あなたはまた、それを動作させるために同様にその機能にthis.element.prop("scrollTop")

に

this.element.attr("scrollTop")のすべての出現を変更する必要がありますので、同じ問題が、activate: function (event, item) {に表示されます。一貫性のない動作を引き起こす可能性がいくつかの属性を取得するときに

あなたはについて.prop() in the jQuery APIを読むことができますが、基本的にこの理由は、jQueryの1.6の前に

で、.ATTR（）メソッドは、時には考慮にプロパティ値を取りました。 jQuery 1.6以降、.prop（）メソッドは明示的にプロパティ値を取得する方法を提供し、.attr（）は属性を取得します。