Duplicate item when searching

[florent1933]

Description

Duplicate item when searching

Expected outcome

Should display only one item

Actual outcome

Steps to reproduce

1. 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'
      }
    ];

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

Browsers Affected

• Chrome
• Firefox
• Safari
• Edge
• IE 11
• iOS Safari
• 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

[Saulis]

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?

[florent1933]

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]

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.

[flyweight]

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

[Saulis]

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

[flyweight]

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

[flyweight]

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.

[Andres0101]

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?

[flyweight]

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

[florent1933]

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

[Saulis]

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

[masonlouchart]

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.

[florent1933]

@LM450N : You are right! Amazing news!

[Saulis]

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.