search

jacobworrel / react-windowed-select

An integration of react-window with react-select to efficiently render large lists.
MIT License
142 stars 38 forks source link

Fixes auto scrolling issue on options mouseover #118

Open mikkpokk opened 1 year ago

mikkpokk commented 1 year ago

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

jacobworrel commented 11 months ago

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

mikkpokk commented 11 months ago

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