Vaadin-combo-box: Item duplicado ao pesquisar

Criado em 27 mar. 2017  ·  14Comentários  ·  Fonte: vaadin/vaadin-combo-box

Descrição

Item duplicado ao pesquisar

Resultado esperado

Deve exibir apenas um item

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

Resultado real

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

Passos para reproduzir

  1. Coloque um elemento vaadin-combo-box na 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>

com

    this.activitiesTypes = [
      {
        $key : 'tennis',
        name: 'tennis'
      },
      {
        $key : 'canoe',
        name: 'canoe'
      }
    ];
  1. Abra a página em um navegador da web.
  2. Clique na entrada do elemento vaadin-combo-box e pesquise um item.

Navegadores afetados

  • [x] Chrome
  • [ ] Raposa de fogo
  • [] Safari
  • [ ] Borda
  • [] IE 11
  • [] iOS Safari
  • [x] Android Chrome

Parece ser apenas no Chrome e no Android Chrome. Eu testei no Firefox, Safari e está funcionando.

Estava funcionando com a versão v1.2.0 e o bug começou na v1.3.0

bug

Comentários muito úteis

Obrigado pela ajuda pessoal, aqui está um snippet para reproduzir o problema:
https://jsfiddle.net/Saulis/we90kg2t/

Todos 14 comentários

Oi!

Não consigo reproduzir o problema em um aplicativo Polymer puro, então acho que tem algo a ver com o Angular. Veja https://jsfiddle.net/Saulis/6kooy6d8/

Você está recebendo algum erro no console?

Seu jsfiddle está funcionando em meu navegador.

Então, você tem razão, é por causa do ângulo. Você tem um modelo com angular e polímero para jsfiddle para reproduzir este bug?

Sem erros no console.

Eu criei um êmbolo com angular e polímero, mas não há bug: https://plnkr.co/edit/pGqa0MXftgpMCSaAXCIO?p=preview

Continuarei investigando para descobrir o motivo do bug.

Também estou experimentando isso usando o Polymer 1.8.1 e o Chrome. Não parece ser um problema em outros navegadores. Estou começando a acreditar que há uma condição de corrida no Chrome para aplicativos maiores que está causando isso. Para reafirmar, funciona bem com vaadin-combo-box 1.2.0 e não funciona corretamente em 1.3.3

@flyweight, você consegue produzir um jsfiddle onde o problema ocorre?

Estou tentando investigar também onde isso pode estar acontecendo, mas estou obtendo os mesmos resultados que @ florent1933

Apenas para observar @Saulis : se eu usar seu modelo para o item mostrado aqui , não vejo o problema. Ele só aparece para mim se eu não incluir um modelo personalizado.

Estou tendo o mesmo problema que @ florent1933 e acho que sei qual é o problema. Estou usando um modelo CLI do Polymer que cria algumas opções de configuração do Polymer no arquivo index.html. Por padrão, é assim:

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

A propriedade DOM é definida como 'sombra' por padrão, mas se você alterá-la para 'sombreada', o problema está resolvido. O elemento não duplica itens ao pesquisar. Existe alguma maneira de fazer funcionar usando 'sombra' ou o elemento deve funcionar apenas com 'sombra'?

Confirmando o que @ Andres0101 afirmou acima, alterar essa propriedade resolve o problema para mim também.

@ Andres0101 : bom trabalho para encontrar o problema desse problema 👍

Seria ótimo se o combobox funcionasse com o shadow dom porque não posso usar o shady dom.

Obrigado pela ajuda pessoal, aqui está um snippet para reproduzir o problema:
https://jsfiddle.net/Saulis/we90kg2t/

Não sei se você viu, mas quando procuramos não é possível selecionar um item duplicado usando a seta para baixo do teclado. Queria exatamente este ponto.

@ LM450N : Você está certo! Notícias incríveis!

Obrigado por @ LM450N por localizar 4f02971!

Vou carimbar este problema encerrado em v2.0.0-alpha1 e recomendar que você comece a usá-lo.

Para aqueles que usam 1.3.x , escolhi a dedo a correção para o branch 1.x - mas cuidado, há algumas mudanças importantes nesse branch em relação ao uso de ícones personalizados - eles usam slot atributos em vez de classes.

Esta página foi útil?
0 / 5 - 0 avaliações