Regression: Filtered Items no longer works with dynamically created combobox. Filtering many items then selecting an item causes DOM to hang.

[flyweight]

Description

1. When adding vaadin combobox dynamically, only supplying filtered-items prevents the ability to provide a selected value.
2. Using many items, filtering the dropdown, and then selecting one of the items hangs the DOM for seconds.

Expected outcome

1. Only supplying filtered-items in a dynamically created vaadin combobox should not cause an exception.
2. Upon filtering and selecting an item, it should not hang the DOM.

Actual outcome

1. Supplying filtered-items throws the exception:

"TypeError: Cannot read property '5' of undefined
    at HTMLElement._getFocusedItem (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/vaadin-combo-box/vaadin-combo-box-dropdown-wrapper.html:210:29)
    at runMethodEffect (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/property-effects.html:813:17)
    at Object.runComputedEffect [as fn] (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/property-effects.html:432:18)
    at runEffectsForProperty (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/property-effects.html:159:14)
    at runEffects (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/property-effects.html:125:13)
    at runComputedEffects (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/property-effects.html:409:14)
    at HTMLElement._propertiesChanged (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/property-effects.html:1691:9)
    at HTMLElement._flushProperties (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/properties-changed.html:338:18)
    at HTMLElement._flushProperties (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/property-effects.html:1551:15)
    at HTMLElement.__enableOrFlushClients (https://polygit.org/vaadin-combo-box+vaadin+3.0.3/polymer+%5E2.0.0/components/polymer/lib/mixins/property-effects.html:1596:22)"

2. DOM hangs for seconds when filtering then selecting an item.

Live Demo

jsbin

Steps to reproduce

In the video, I change filtered-items to items, which circumvents the exception but breaks my particular use case. It also causes the DOM to hang when filtering and selecting an item.

video

Browsers Affected

• Chrome
• Firefox
• Safari
• Edge
• IE 11
• iOS Safari
• Android Chrome

[flyweight]

The following changes seem to fix the first item in this issue. However, it causes another problem. Upon selecting an item, opening the dropdown, and selecting a different item, the selected value does not change anymore.

File : vaadin-combo-box/vaadin-combo-box-mixin.html

 590     _selectedItemChanged(selectedItem) {
...
 618       Polymer.RenderStatus.afterNextRender(this, () => {
 619         this.$.overlay._selectedItem = selectedItem;
 620         if (Array.isArray(this.filteredItems)) {
 621           this._focusedIndex = this.filteredItems.indexOf(selectedItem);
 622         }
 623       });
 624     }

For the second issue (slowness after selecting an item upon having filtered the list), here is a performance audit:

[web-padawan]

@flyweight the second point of your issue (DOM hangs for seconds) is now in progress, see #618

[flyweight]

Thanks @web-padawan 👍