react-windowed-select icon indicating copy to clipboard operation
react-windowed-select copied to clipboard

Fixes auto scrolling issue on options mouseover

Open mikkpokk opened this issue 2 years ago • 2 comments

Uses document event listener and activeElement object to determine if scrolling is needed. #59

mikkpokk avatar Sep 15 '23 13:09 mikkpokk

@mikkpokk This introduces the following issue:

  1. move down with the down arrow enough until the scrolling starts and then keep going for awhile
  2. scroll back up with up arrow

There's a flicker and the highlighted item stays at the bottom of the menu.

jacobworrel avatar Oct 27 '23 04:10 jacobworrel

@mikkpokk This introduces the following issue:

  1. move down with the down arrow enough until the scrolling starts and then keep going for awhile
  2. scroll back up with up arrow

There's a flicker and the highlighted item stays at the bottom of the menu.

I'm not able to track down the cause.

This very same flicker behaviour happens when you move mouse slowly to the top of the menu right after the select has been opened and focused/active element is placed somewhere else than at the beginning of the scroll. This type of flicker will be permanently scrolling back to top of the menu however. That's because any event doesn't happen inside the MenuList component.

This issue doesn't occur without this PR only because originally MenuList component forces react-window to recaluclate scroll position with every move and change.

Probably, it's caused because of some sort of falsy calculation or incorrect ref given to react-window.

mikkpokk avatar Oct 27 '23 23:10 mikkpokk