Scrolling with Page Up/Down Keys in React-Window

                    Photo by Ruthie on Unsplash

React-Window is a React library by Brian Vaughn for rendering a massive amount of items in a list (or a grid but I will use “list” to keep the sentences simple as principle is the same for both) efficiently.

By rendering only visible items

But the problem is that when you click on an item in a list, you can’t scroll up/down using keys.

such as Page Up/Down, Arrow Up/Down, Home, or End keys.

Let’s see how we can support scrolling in react-window with Page Up/Down.

Replicating the issue

Go to an (any example) react-window example and scroll up/down with keyboard without selecting an item in the list.

You should be able to scroll with any keys.

And then click on any item in the list and try to scroll with keyboard.

And you will see that it will move just once and stop responding.

What happened?

The behavior isn’t implemented according to this GitHub issue, Support scrolling with Page Up / Page Down keys (, which is NOT created by me but by Steve Randy Tantra).

And you are responsible to add a support for yourself.

Thankfully, Brian has provided a way to implement it in the same thread.

Let’s Make that example list scrollable with Page Up/Down, Home and End keys.

Implementation

You can see the working implementation here and follow along.

Unfortunately, keyboards will scroll this current page up/down thus you’d have to open the editor in new window….

Wrap the list with a container element

First you need to wrap the list within a container element such as div/section/main etc.

And then add the tab index to capture the onKeyDown event.

Add references to the list

Next, we need to refer to the list to scroll so create two (you can create one but it’s more readable with two, I will show you why later) references to the List.

outerListRef is an outerRef refers to the List itself (the container property) while innerListRef is the dynamic container which updates as you scroll and contains the maximum content height.

You can refer to the documentation on inner/outerRefs but found it a bit hard to grasp without looking at the code. So let’s take a look at what those two references actually refer to in rendered HTML.

The outerRef is the element we need to use scrollTo (scroll is the same)API with and the innerRef is the element we need to extract the maximum height from.

Without innerRef, you refer to it as outerRef.current.firstElementChild so innerRef improves readability.

Handling onKeyDown event

Let’s add the onKeyDown event handler, which is fired whenever you hold down any keys.

handleKeyDown is given a keyboard event with a keyCode property, which is destructured from the argument.

And when the matching key is found from the keys then we set the scroll offset (where we are currently in the list).

keys object(an essentially a map) holds a list of keys to be handled where

• pageUp has keyCode value of 33
• pageDown has keyCode value of 34
• end has keyCode value of 36
• home has keyCode value of 35

So whenever pageUp/Down, end, or home keys are pressed, we are updating the current position (scroll offset).

maxHeight is retrieved using the innerRef‘s style height for convenience without using outerRef.

minHeight is set to oddly 0.1 instead of 0. I really have no idea why setting it to 0 would not work with scroll API.

Would anyone let me know why it is so?

And let’s rock and scroll~

As react-window mutates the DOM while scrolling, we need to add it to the useLayoutEffect because we need to scrolling to happen after it.

useLayoutEffect documentation says “it fires synchronously after all DOM mutations.”

Would anyone let me know if it’s a good approach? (because useEffect still worked fine.)

Scrolling mutating the DOM

Refer to Kent C. Dodds’ post useEffect vs useLayoutEffect for difference between them.

In the effect, we are basically calling scrollTo to update the current scroll position in the list.

When the behavior is set to smooth it was gliding, which I am not sure how to prevent from happening…😅

Yet, again, I shameless ask why it’s happening and how to get around the issue 🙏

Roulette?

Result

Now you can scroll using Page Up/Down, Home, and End keys.

Here is the link to the code again on CodeSandbox.

I’ve had the problem implementing it for one of the pet projects and that GitHub issue and seemingly simple but yet helpful reply by Brian saved the day. So I give thanks to Steve & Brian.

I’d appreciate it if anyone can provide me with feedbacks for questions I’ve asked above 🙂

The post Scrolling with Page Up/Down Keys in React-Window appeared first on Sung's Technical Blog.

Comments

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

[Sung M. Kim]

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?

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

[Sung M. Kim]

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

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