DEV Community

Cover image for Scrolling with Page Up/Down Keys in React-Window

Scrolling with Page Up/Down Keys in React-Window

Sung M. Kim on May 08, 2019

                    Photo by Ruthie on Unsplash React-Window is a React library by Brian Vaughn for rendering a massive amount of items in a list ...
Collapse
 
petyosi profile image
Petyo Ivanov

Hey there,

Hey! I just got the same problem reported in react-virtuoso. Published a fix for it in the 0.2.0 release, that should address the problem in a native manner. Please give the home demo a try.

The root cause of the problem: clicking an element inside the list and then scrolling down removes the said element from the document. From there on, the browser no longer considers the scroller of the list to be the active one.

Collapse
 
dance2die profile image
Sung M. Kim • Edited

Thank you, Petyo for helping me understand the "why" the problem occurred.

I've tried the updated list and it scrolls with keys naturally :)

And to rephrase my understanding, when a user clicks on an element, keyevent is bound to the item, and when scrolled away from the viewport, the keyevent is no longer triggered?

Collapse
 
petyosi profile image
Petyo Ivanov

Your understanding is correct. The scrolling away from the viewport is not the problem, but rather the fact that the virtualization mechanism removes the element once it is no longer visible.

Once this happens, the browser will emit subsequent keyboard events from the document element.

Thread Thread
 
dance2die profile image
Sung M. Kim

Thank you again for clearing up my understanding, Petyo :)

Collapse
 
troywolf profile image
Troy Wolf

Thanks for this example and explanation. I am using this in a react-window implementation. I also found this example worked right "out of the box" for a regular table inside a div with overflow. I just added the ref to the div that has the overflow style applied.