I'm using react-window library as a way of virtualizing an item list. And while I'm making it accessibility proof by using arrow keys to navigate through the items, I noticed that at some point, the focus on the items would be lost. Falling back to body element.

At first I thought it was something in the app causing it, but when I checked the library demo I noticed it's replicable there.

The way to test it is just click in the container and start using the arrow keys to navigate/scroll through the list. You will see that eventually the focus on the scrollable container will be lost.

I thought that it could possibly be some rendering time issue on the virtualized items, letting some space or time to render so you would move smoothly without losing focus, especially if you go fast.

So what I attempted is whenever I move to an item up/down, I would scroll the container so that the item is always centered, kind of forcing the list to render more and more items. But unfortunately it didn't work.

Do you guys know how to achieve this without losing focus? Any ideas? I can't have an accessibility experience where the person loses focus out of nowhere.

Thanks in advance.