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

Focuses the second item in the list, after navigating from the fixed menu #106

Closed VIKTORsUA closed 2 years ago

VIKTORsUA commented 3 years ago

Describe the bug On the left side a fixed vertical menu on the right a horizontal list. If the menu has hasFocusedChild=true its width is increased. When navigating to the right, the second list item is focused.

To Reproduce Steps to reproduce the behavior:

  1. Navigate to the menu from the first item in the list
  2. Click on 'right'
  3. Second element of the list is focused

Expected behavior After right click the first element of the list should be focused

Screenshots https://prnt.sc/1qac4h5 https://prnt.sc/1qac743

Additional context Does not matter whether the menu overlaps or shifts

asgvard commented 3 years ago

Hi. This is a quite common problem when there are overlapping elements on the screen. If the menu is expanded - when you click Right - it will calculate the coordinate based on the expanded menu - so the next target is the 2nd item. We solve this by having the menu to be outside of the screen (by doing absolute position "-menuWidth"), and then translating it back for the same amount with "translateX(menuWidth)". This makes it to have the "real" coordinate to be far away to the left, but to appear visually as though as it is overlapping the page. Hope it helps. It's hard to say in more detail without knowing the full DOM structure.

predikament commented 2 years ago

Closing issue due to no further activity or input from @Viktorsua since the response by @asgvard in August.