JQuery UI autocompletar no se desplaza con las teclas de flecha en Firefox

Question

Estoy trabajando con el JQuery UI autocompletar 1.8 con JQuery 1.6.1. (Obtención de nuevas versiones de software es extremadamente difícil en mi empresa, así que estoy atascado con estos.)

que tienen una larga lista de cadenas colocadas en el panel de autocompletar, por lo que la clase de estilo .ui-autocompletar como esto

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

Ahora, cuando aparece el menú desplegable Autocompletar, tiene una barra de desplazamiento como se desee. Sin embargo, cuando uso las teclas de flecha para navegar por el menú desplegable, el panel no se desplaza con la selección. Las selecciones aún ocurren. Finalmente, salgo del final de la lista y el cursor vuelve a la parte superior. Todo se comporta como se espera, excepto que el panel de desplazamiento no se desplaza.

En pruebas fuera del trabajo donde tengo acceso a otros navegadores, encuentro que Chrome se desplaza correctamente y IE 8 se desplaza correctamente. ¿Es esto un error con el navegador de Firefox 3.6 Linux o me falta algo?

estoy esposado a 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)

¿Es esto un error con esta versión del navegador o me falta algo?

EDIT: Pude encontrar una máquina con ie6 y una con Firefox 3.5.3. ie6 desplazado y Firefox 3.5.3 no. Parece que podría ser un problema con Firefox.

Answer 1

Tuve un problema similar con nuestra aplicación que se ejecuta en jQuery v1.7.2 y jQuery UI v1.8.11 en cualquier navegador. Sin embargo, he descubierto que se corrigió en jQuery UI v1.8.13 changelog.

De acuerdo con la corrección en el conjunto de cambios, todo lo que hice fue anular dos funciones de la siguiente manera y soluciona el problema.

$.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

Solución: La actualización a jQuery UI 1.8.18 me solucionó este problema.

No es una respuesta, pero podría proporcionar más información sobre el problema. Si sigue las llamadas cuando presiona las teclas hacia arriba o hacia abajo cuando el menú está abierto, llega al método de activación del widget de menú que llama al método hasScroll (Línea 5487 usando v1.8.11);

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

Parece que el problema es que el atributo scrollHeight no está definida para el elemento de menú ul y por lo tanto este método siempre devuelve falso.

Aquí es el método de activación:

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 }); 
    } 

Incluso si se fuerza el método hasScroll para devolver cierto, se encuentra con otro problema como el atributo scrollTop no se define bien.

Te avisaré si encuentro una solución a esto ya que también está plagando mi aplicación.

Answer 3

Noté que this.element.attr("scrollHeight") en

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

vuelve indefinido. Si cambia this.element.attr("scrollHeight") a this.element.prop("scrollHeight") en su lugar, obtendrá un scrollHeight.

Pero entonces el mismo problema aparece en activate: function (event, item) {, por lo que también tendrá que cambiar todas las apariciones de

this.element.attr("scrollTop") a this.element.prop("scrollTop")

en esa función, así para hacer que funcione.

se puede leer sobre .prop() in the jQuery API pero básicamente la razón de esto es

Antes de jQuery 1.6, el método .attr() a veces se valores de las propiedades en cuenta cuando se recuperan algunos atributos, lo que podría causar un comportamiento incoherente. A partir de jQuery 1.6, el método .prop() proporciona una forma de recuperar explícitamente valores de propiedad, mientras que .attr() recupera atributos.