Vaadin-combo-box: Elemento duplicado al buscar

Creado en 27 mar. 2017 · 14Comentarios · Fuente: vaadin/vaadin-combo-box

Descripción

Elemento duplicado al buscar

Gastos esperados

Debe mostrar solo un elemento

capture d ecran 2017-03-27 a 00 58 46

Resultado real

capture d ecran 2017-03-27 a 00 43 54

pasos para reproducir

Ponga un elemento vaadin-combo-box en la página

        <vaadin-combo-box #searchSport no-label-float
        *ngIf="activitiesTypes"
          placeholder="Activité"
          [items]="activitiesTypes"
          item-label-path="name"
          item-value-path="$key"
          [value]="activitiesTypeUid"
          (selected-item-changed)="activitiesType=$event.detail.value">
        </vaadin-combo-box>

con

    this.activitiesTypes = [
      {
        $key : 'tennis',
        name: 'tennis'
      },
      {
        $key : 'canoe',
        name: 'canoe'
      }
    ];

Abra la página en un navegador web.
Haga clic en la entrada del elemento vaadin-combo-box y busque un elemento.

Navegadores afectados

[x] Chrome
[] Firefox
[] Safari
[ ] Borde
[] IE 11
[] Safari de iOS
[x] Android Chrome

Parece estar solo en Chrome y Android Chrome. Probé en firefox, safari y está funcionando.

Estaba funcionando con la versión v1.2.0 y el error comenzó en v1.3.0

bug

Fuente

florent1933

👍1

Comentario más útil

Gracias por la ayuda, chicos, aquí hay un fragmento para reproducir el problema:
https://jsfiddle.net/Saulis/we90kg2t/

Saulis en 18 abr. 2017

👍3 🎉1

Todos 14 comentarios

¡Hola!

No puedo reproducir el problema en una aplicación de polímero puro, así que supongo que tiene algo que ver con Angular. Ver https://jsfiddle.net/Saulis/6kooy6d8/

¿Recibes algún error en la consola?

Saulis en 27 mar. 2017

Su jsfiddle está funcionando en mi navegador.

Entonces, tienes razón, es por angular. ¿Tiene una plantilla con angular y polímero para que jsfiddle reproduzca este error?

Sin errores en la consola.

florent1933 en 27 mar. 2017

Creé un plunker con angular y polímero pero no hay ningún error: https://plnkr.co/edit/pGqa0MXftgpMCSaAXCIO?p=preview

Continuaré investigando para encontrar el motivo del error.

florent1933 en 27 mar. 2017

👍2

También estoy experimentando esto con Polymer 1.8.1 y Chrome. No parece ser un problema en otros navegadores. Estoy empezando a creer que existe una condición de carrera en Chrome para aplicaciones más grandes que está causando que esto suceda. Para reafirmar, funciona bien con vaadin-combo-box 1.2.0 y no funciona correctamente en 1.3.3

flyweight en 31 mar. 2017

@flyweight , ¿puede producir un jsfiddle donde ocurre el problema?

Saulis en 31 mar. 2017

También estoy tratando de investigar dónde podría estar sucediendo esto, pero obtengo los mismos resultados que

flyweight en 31 mar. 2017

Solo para tener en cuenta @Saulis : si uso su plantilla para el elemento que se muestra aquí , entonces no veo el problema. Solo me aparece si no incluyo una plantilla personalizada.

flyweight en 31 mar. 2017

Tengo el mismo problema que @ florent1933 y creo que sé cuál es el problema. Estoy usando una plantilla CLI de polímero que crea algunas opciones de configuración de polímero en el archivo index.html. Por defecto tiene este aspecto:

window.Polymer = {
  dom: 'shadow',
  lazyRegister: true,
};

La propiedad DOM está establecida en 'sombra' de forma predeterminada, pero si la cambia a 'sombra', el problema se resuelve. El elemento no duplica elementos durante la búsqueda. ¿Hay alguna forma de hacer que funcione usando 'sombra' o se supone que el elemento funciona solo con 'sombra'?

Andres0101 en 31 mar. 2017

👍2

Confirmando lo que @ Andres0101 ha dicho anteriormente, cambiar esa propiedad también resuelve el problema para mí.

flyweight en 31 mar. 2017

@ Andres0101 : buen trabajo para encontrar el problema de este tema 👍

Sería genial si combobox pudiera funcionar con shadow dom porque no puedo usar shady dom.

florent1933 en 15 abr. 2017

Gracias por la ayuda, chicos, aquí hay un fragmento para reproducir el problema:
https://jsfiddle.net/Saulis/we90kg2t/

Saulis en 18 abr. 2017

👍3 🎉1

No sé si lo ha visto, pero cuando buscamos no es posible seleccionar un elemento duplicado usando la flecha hacia abajo del teclado. Quería precisar este punto.

masonlouchart en 10 may. 2017

@ LM450N : ¡Tienes razón! ¡Buenas noticias!

florent1933 en 11 may. 2017

¡Gracias por @ LM450N por detectar 4f02971!

Voy a sellar este problema cerrado en v2.0.0-alpha1 y recomendaré moverse para usarlo.

Para aquellos que usan 1.3.x , he elegido la solución para la rama 1.x , pero cuidado, tiene algunos cambios importantes en esa rama con respecto al uso de iconos personalizados: usan slot atributos en lugar de clases.

Saulis en 11 may. 2017

¿Fue útil esta página

0 / 5 - 0 calificaciones