Select: scroll, pointer, and arrow events conflicting and causing issues with active option and visibility

[pstauskas]

There are problems simultaneously handling the Select drop container scroll, pointer events, arrow key events, and the current active option.

Expected Behavior

If I have 2000 options in a Select, I should be able to press and hold the down arrow key to scroll through all 2000 items, making each option active (highlighted) until I hit the bottom of the list. Additionally, the active option should always be visible. This should be true no matter where i originally positioned my mouse pointer within the drop container.

Actual Behavior

1. If I press and hold the down arrow key immediately after opening the Select without moving my mouse, the active option seems to be fine for a little while (before the drop container starts scrolling).
   a) At that point the active options are no longer visible within the drop, but the drop container keeps scrolling, presumably making options active "below" the visible container.
   b) Finally after ~40 change events, the scroll simply stops and pressing the down arrow key does not appear to have any effect.

Here is a recording of everything described above: http://g.recordit.co/lPAVS5k3Km.gif. Note that I did not release the down arrow key when the scrolling stopped.

2. If I hover over any option with my mouse, and continue to press the down arrow key until the drop container is forced to scroll, then if I stop pressing the down arrow key, the active option reverts back to the option which my mouse pointer is still hovered over. This is incorrect because I haven't moved my mouse pointer after the down arrow event - presumably the scroll event has impacted the behavior negatively.

Here is a recording of everything described above: http://g.recordit.co/6sWNnVyovH.gif.

Codesandbox exhibiting the issues

https://codesandbox.io/s/v8x34zn5j5 (Go to Select component)

Environment

• Grommet version: 2.2.1
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): macOS Sierra

[pstauskas]

hi @ericsoderberghp @alansouzati was this intended to be fixed in v2.3.0? Unfortunately I am seeing many of the same issues, plus the overall experience within a Select that has thousands of items is now noticeably more laggy than v2.2.1.

[ericsoderberghp]

We thought we had fixed things on the stable branch back in early December, right after 2.2.1. I just checked with https://storybook.grommet.io/?selectedKind=Select&selectedStory=Lots%20of%20options&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel
and it seems to be behaving well. But, I suspect I am not interacting with it in the right way or noticing something. Can you point to a particular issue with that story?

[pstauskas]

Sure, here is a recording of that storybook where i am holding the down arrow, while my cursor is over one of the middle visible rows. When I stop holding the down arrow, the active row jumps to wherever my cursor is. When I go slower, this isn't an issue.

A second problem I reproduced in my application, is that eventually after holding the down arrow long enough (alternating between some quick triggered down presses, and back to holding it) will cause the scrolling to stop. You can see this around 8 seconds into the recording, it stops for 2 seconds, but i am still pressing the down arrow at that point. In this scenario, the active options keep changing "below the fold" but the scrolling doesn't happen to match the change in active row. I have two suspicions - 1) is that there is some race condition of some sort happening, and/or 2) it could be possible that this is more likely to happen to when rows differ in height (as you can see in my example).