Photo by Ruthie on Unsplash
React-Window is a React library by Brian Vaughn for rendering a massive amount of items in a list ...
For further actions, you may consider blocking this person and/or reporting abuse
For further actions, you may consider blocking this person and/or reporting abuse
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.
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?
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.
Thank you again for clearing up my understanding, Petyo :)
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.