[combo-box] The input text flickers while navigating the options

[tomivirkki]

Navigating the options with up/down keys, the value in the input field flickers on every change.

We have got the same problem.

[samiheikki]

Occurs because of this timeout (removing it will fix this issue). https://github.com/vaadin/vaadin-combo-box/blob/master/src/vaadin-combo-box-mixin.html#L423

@platosha Can you test that if removing timeout will make any change with the Osx voiceover? I tried and to me it seemed to work the same way with our without timeout.

[platosha]

@samiheikki I have tried again with macOS High Sierra VoiceOver and recent Chrome and Safari. It seems, with Safari we don’t need this workaround anymore, but still need something for Chrome.

Steps to reproduce:

• Open demo page with combo-box
• Enable VoiceOver
• Focus <vaadin-combo-box> with many similar items
• Navigate the items list by pressing ↑/↓ keys

Without the fix, only the few changed letters are announced for similar items, e. g., changing “Sodium” to “Calcium” results in “Calc”.

However, I found a better workaround. We could use synchronous value change, and then async _markAllSelectionRange() after 1ms timeout. This works even better in Chrome, produce less visual flickering, and does not break the already good VoiceOver with Safari either.

[samiheikki]

I tried with synchronous value change and async (1sec) _markAllSelectionRange and to me it seemed to announce only the letter that were changed. And actually I now noticed the same behavior in the master as well, I missed at the first time.

I found the problem. During lazyloding the number of items was different from the number in the count method.