search

NoriginMedia / react-spatial-navigation

DEPRECATED. HOC-based Spatial Navigation. NEW Hooks version is available here: https://github.com/NoriginMedia/norigin-spatial-navigation
MIT License
226 stars 64 forks source link

CSS gap:0 breaks navigation #100

Closed EwanRoycroft closed 1 year ago

EwanRoycroft commented 3 years ago

Describe the bug I created a CSS grid with a gap of "2vw 0" and react-spatial-navigation seems to have trouble deciding which cell it should navigate to. When navigating sideways, it will not focus on certain cells. The cell it will skip depends on which direction you're travelling in and the exact size of the grid. Changing the grid margin/padding or resizing the window will change the behaviour. This only seems to happen when the gap is exactly 0. Setting it to 1px negates the issue.

To Reproduce I've created a simple example app here: https://github.com/EwanRoycroft/rsn-test/tree/grid

To reproduce, clone the repo and follow instructions to start the dev server. Once you have opened the app, try navigating from side-to-side and you should see it skipping cells. As I mentioned above, the behaviour is dependent on the size of the grid, so if you can't reproduce, try adjusting the margin of .page or resize the window.

Examples In this recording, see that RSN skips over the second cell when I navigate right. When I try to navigate back left, I cannot focus on the first column: https://user-images.githubusercontent.com/2302279/128329581-7f48c43d-694a-408f-976f-9fccca6d3b4e.mov

In this recording, I have enlarged the window. RSN is no longer skipping over cells, but I cannot focus on the last column: https://user-images.githubusercontent.com/2302279/128329614-6fe00128-4029-4cb1-bf1f-fe80e3d51c66.mov

EwanRoycroft commented 2 years ago

This also happens for items in horizontal/vertical lists where there is no margin between each <li>.