Integrate with React-Window caused incorrect focused element

[hantrungkien]

Describe the bug Based on your example, I've created a demo with react-window. But when key-up and key-down are pressed, focusable element is wrong.

To Reproduce https://codesandbox.io/s/happy-voice-8hmrt0

yarn start

And then press key-down you can see focus move from row 1 -> row 2 -> row 4.

And then press key-up you can see focus move from row 4 -> row 3 -> row 1.

Screenshots

https://user-images.githubusercontent.com/20286370/192446409-5d7b47d6-a815-4eb9-91ac-d99ed4d30b44.mp4

[predikament]

👋 Hello @hantrungkien,

I've checked the example you shared, but for me it does not actually work as you described (tried both Chrome and Firefox). On my side nothing is focused at all and when I try to navigate the entire page is actually scrolling instead. The video you've attached is also corrupted, so I cannot really see the problem you have, but I will take your word for it.

Based on your example I made a smaller example myself using react-window's FixedSizeList and I can confirm that the focus is not working as I'd expect, so there is some problem here when using it in tandem with our library.

We can look into this, but it might not be a problem that we can actually solve, if the reference to the element's we need are somehow not available or nested inside some other element created by this FixedSizeList component.

I will try to get back to you on this once we've had time to look into it.

Thanks for your input, sorry that I don't have a quick solution to offer you.

[guilleccc]

Hello @hantrungkien ,

I looked at your example, and after adding the init() I could see what you were reporting above. At your example, you defined the following code:

<FixedSizeList
          layout="horizontal"
          direction="ltr"
          innerRef={ref}
          outerRef={scrollingRef}
          height={window.innerHeight / 3.5}

I think height={window.innerHeight / 3.5} is causing some issues on navigation due to having a float value. I don't know exactly why you would use this sort of values, but to me is an edge case. I believe the float number makes collapsing between some "boxes", and that produces an incorrect navigation. As a quick solution you can use parseInt(window.innerHeight / 3.5), as you will find in this example as well.

Alternatively you can use a fixed value (e.g.: height=200).

This combination of react-window with float number is quite uncommon, so I will close this issue for now. Feel free to reopen if you reproduce this issue in other scenarios