Item duplicado ao pesquisar
Deve exibir apenas um item
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'
}
];
vaadin-combo-box
e pesquise um item.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
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.
Comentários muito úteis
Obrigado pela ajuda pessoal, aqui está um snippet para reproduzir o problema:
https://jsfiddle.net/Saulis/we90kg2t/