Click events not always registering for Rows when scrolling fast

[johot]

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!

[bvaughn]

This library intentionally disables pointer-events while a user is scrolling to improve performance. This is a common technique in windowing libraries (see react-virtualized, react-infinite's Infiniteand fixed-data-table's FixedDataTableBufferedRows).

To my knowledge, this is still commonly done to improve performance (although admittedly it has been a while since I've looked into this so it's possible things have changed– in which case, I'd welcome any updated resources you may have).

For the time being though, I'm going to close this issue as I don't plan on changing the current behavior. We can continue to chat here though if you have more ideas or questions. 😄

[bvaughn]

I should add that I currently reset the is-scrolling state after a 150ms delay so the window of time in which a click event is not handled should be small.

[johot]

Thank you @bvaughn!

I actually found the same info yesterday looking through the react-virtualized issues for hints. I fixed the problem by adding pointerEvents: 'auto' to my Rows so this was definitely the case.

Could this maybe be documented somewhere? Or even better the ability to disable the behavior using a prop on the FixedSizeList etc?

Also regarding performance, in my case I did not really notice any decrease in performance after overriding pointerEvents so the fix is working great. I do occasionally still hit it if the item is slow to render, in that case a virtualized onClickItem or something on the list could present a possible fix since it should in theory be able to calculate which item should be clicked based on offset and row height right?

Thanks again!

[bvaughn]

I don't think I want to add a prop to override this behavior, because those one-off props bloat the library and make maintenance more difficult.

Have a Code Sandbox or something showing your workaround? Maybe I could add it to the FAQs or something.

in that case a virtualized onClickItem or something on the list could present a possible fix since it should in theory be able to calculate which item should be clicked based on offset and row height right?

That's sort of an interesting idea. If you'd like to put up a PR, I'd be happy to review it. (No promises it would land– depends on complexity and size.)

[johot]

The workaround is basically just this:

export function Row(props) {
  return (
    <div onClick={() => alert("Clicked")} style={{ pointerEvents: "auto" }}>
      Click me
    </div>
  );
}

A first step would be to just add it to the FAQ I guess (in Readme.md?). Another thing I would love to see in the FAQ is something about AutoSizer, had to dig around the issues to find that info also :)

[bvaughn]

Cool, thanks. :) PRs to the README are always welcome too~

[johot]

Sure thing, will look into it :D

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

[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

[Amaranthusss]

It's now the end of 2023, and I've encountered the exact same issue. I've spent many hours trying to optimize my code, and now I know that simply setting pointerEvents to 'auto' was all that was needed :). If I had pushed the changes with ignoring events during fast scrolling, someone would surely have reported it as a bug.

@johot Thanks for the workaround :)

[johot]

Glad to have helped! 😊