Giters

NoriginMedia / Norigin-Spatial-Navigation

React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vertically stacked items focus issue

hhanifkhan opened this issue · comments

commented

Describe the bug
Case 1: Focus Skipping

  • I have 4 vertically stacked items.
  • Using up and down arrow keys, focus skips the 3rd item, moving directly from the 2nd to the 4th item.

Case 2: Non-Focusable Element
Even setting the 3rd item's width to 100%, it remains non-focusable.

To Reproduce
Steps to reproduce the behavior:

  1. Go to source_url

Expected behavior
Focus should move sequentially through all four items using up and down arrow keys.
The 3rd item should be focusable.

Screenshots
attaching video

Screen.Recording.2024-03-21.at.5.14.01.PM.mov

Additional context
Add any other context about the problem here.

commented

Hi!

Thanks for the good description of the issue you are facing.

We have a logic in our algorithm that considers the item as Main Axis Sibling when its edge overlaps with the current item by at least 20%. You can check for the usage of this constant:

Norigin-Spatial-Navigation/src/SpatialNavigation.ts

Line 33 in 19ceeb1

const ADJACENT_SLICE_THRESHOLD = 0.2;

Otherwise it would jump sideways for items that overlap for at least 1px, which is what we tried to avoid by doing this check. In your case the problem is that the item on row 3 is too far left, so visually the item from row 4 "looks closer".
It seems to be quite an edge case and I'm not sure we want to change the algorithm because there will be other edge cases that might break due to this. I assume this is some kind of EPG grid based on the layout you provided?

We might look into letting users customize the Adjacent Threshold, but for now you can consider the next workaround:

  1. Set predictive focus keys for all items (for example as my-item-{rowIndex}-{columnIndex})
  2. Block default navigation by returning false from onArrowPress (Docs)
  3. Manually call setFocus to the desired item Index like my-item-{rowIndex + 1}-{columnIndex} if it goes Down for example.

I hope it answers your question. We will add a task to our backlog to see if we can provide more control for users to decide the distance calculations strategy, but it's unlikely to be a high priority as there is a way to override this behavior.