Vaadin-combo-box: Duplicate item when searching

Created on 27 Mar 2017 · 14Comments · Source: vaadin/vaadin-combo-box

Description

Duplicate item when searching

Expected outcome

Should display only one item

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

Actual outcome

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

Steps to reproduce

Put a vaadin-combo-box element in the page

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

with

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

Open the page in a web browser.
Click the input of vaadin-combo-box element and search an item.

Browsers Affected

[x] Chrome
[ ] Firefox
[ ] Safari
[ ] Edge
[ ] IE 11
[ ] iOS Safari
[x] Android Chrome

It seems to be only in in Chrome and android Chrome. I tested on firefox, safari and it's working.

It was working with the release v1.2.0 and the bug started in v1.3.0

bug

Source

florent1933

👍1

Most helpful comment

Thanks for the help guys, here's a snippet to reproduce the issue:
https://jsfiddle.net/Saulis/we90kg2t/

Saulis on 18 Apr 2017

👍3 🎉1

All 14 comments

Hi!

I can't reproduce the issue in a pure Polymer app, so I'm guessing it has something to do with Angular. See https://jsfiddle.net/Saulis/6kooy6d8/

Are you getting any errors in the console?

Saulis on 27 Mar 2017

Your jsfiddle is working on my browser.

So, you are right, it's because of angular. Do you have a template with angular and polymer for jsfiddle to reproduce this bug?

No errors in the console.

florent1933 on 27 Mar 2017

I created a plunker with angular and polymer but there is no bug : https://plnkr.co/edit/pGqa0MXftgpMCSaAXCIO?p=preview

I will continue to investigate to find the reason of the bug.

florent1933 on 27 Mar 2017

👍2

I'm also experiencing this using Polymer 1.8.1 and Chrome. Doesn't seem to be an issue in other browsers. I am starting to believe that there is a race condition in Chrome for larger apps that is causing this to happen. To reaffirm, works fine with vaadin-combo-box 1.2.0 & doesn't work correctly in 1.3.3

flyweight on 31 Mar 2017

@flyweight are you able to produce a jsfiddle where the issue occurs?

Saulis on 31 Mar 2017

I'm trying to investigate as well where this could be happening but am getting the same results as @florent1933

flyweight on 31 Mar 2017

Just to note @Saulis: if I use your template for the item shown here, then I don't see the issue. It only appears for me if I don't include a custom template.

flyweight on 31 Mar 2017

I'm having the same issue as @florent1933 and I think I know what the problem is. I'm using a Polymer CLI template which creates some Polymer configuration options in the index.html file. By default it looks like this:

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

The DOM property is set to 'shadow' by default, but if you change it to 'shady' the problem is solved. The element does not duplicate items when searching. Is there any way to make it work using 'shadow' or is the element supposed to work with 'shady' only?

Andres0101 on 31 Mar 2017

👍2

Confirming what @Andres0101 has stated above, changing that property resolves the issue for me as well.

flyweight on 31 Mar 2017

@Andres0101 : good job for finding the problem of this issue 👍

It would be great if combobox can work with shadow dom because I can't use shady dom.

florent1933 on 15 Apr 2017

Thanks for the help guys, here's a snippet to reproduce the issue:
https://jsfiddle.net/Saulis/we90kg2t/

Saulis on 18 Apr 2017

👍3 🎉1

I don't know if you have seen but when we search it's not possible to select a duplicate item using keyboard down arrow. Wanted precise this point.

masonlouchart on 10 May 2017

@LM450N : You are right! Amazing news!

florent1933 on 11 May 2017

Thanks for @LM450N for spotting 4f02971!

I'm going to stamp this issue closed in v2.0.0-alpha1 and recommend moving to use that.

For those using 1.3.x, I've cherry-picked the fix to branch 1.x – but beware, it has some breaking changes in that branch regarding using custom icons – they use slot attributes instead of classes.

Saulis on 11 May 2017

Was this page helpful?

0 / 5 - 0 ratings