React-virtualized: Multiple <WindowScrollers> on a page cause a race condition

[karleberts]

If you have more than one <WindowScroller> on a page the body will, after scrolling, have its pointerEvents style permanently set to none.

The issue is that each instance saves the current pointerEvents value inside its onScroll handler (so it can restore it after scrolling), then sets it to none. When the second scroll handler fires, it sees that pointerEvents is set to none, so when its _enablePointerEventsAfterDelayCallback fires, it "restores" it to none regardless of what the original value actually was.
(see this plunker for a demo)

A (relatively) simple fix would be to modify the event handling of <WindowScroller> to just attach a single scroll handler to the document. This handler could modify/restore the body's pointerEvents style, and pass scrollTop values to mounted components.

I can issue a PR if it'd help.

[bvaughn]

I can issue a PR if it'd help.

Hey @karleberts. Please do! I'm traveling in China for the next 2 weeks and so my bandwidth is pretty limited.

I never envisioned more than 1 WindowScroller being used on a page to be honest. I'd be interested to learn more about your use-case.

[karleberts]

My use case might be a bit uncommon, but basically I've just got a multi-column layout where I want each column to be a virtual scroll.

[bvaughn]

Sounds reasonable. I greatly appreciate the PR!

As I mentioned, I'm on the road for the next few days- but I'll try to find time to review it within the next few hours if I can. 😄

[bvaughn]

This change will be going out as 7.23.0 in a few moments.

Thanks again!

[karleberts]

That was amazingly fast, thanks again!