Click events not always registering for Rows when scrolling fast

So I have created a basic ListBox using react-window and everything is rendering great!

One problem I have however is that if I scroll the list and right after scrolling click on an item it’s click handler (a div in this case) is not always invoked.

My guess is that I click before the item has been properly rendered and placed on the screen. Does this sound plausible?

Maybe if the FixedSizeList could have it’s own click handler that could calculate which items should have been clicked in case it has not been rendered fully yet?

Is there any strategy or workaround for these kinds of problems? Is it a known issue?

Thanks for a great library!

[chrisnojima]

Just want to chime in that I just got a bug report about this in our app and am now applying this as a workaround

[heyimalex]

@johot Here’s a codesandbox that kinda does what you were talking about with the virtualized onClick but outside of the library. I didn’t think too hard about it but it seems to work? It tracks scroll position through the onScroll callback, and attaches an onClick handler to a container div that calculates the item under the cursor.

Edit: I’m dumb, this needs to take into account the container position, so an actual working impl also needs a ref on the container and to use getBoundingClientRect.