NoriginMedia / Norigin-Spatial-Navigation

React Hooks based Spatial Navigation (Key & Remote Control Navigation) / Web Browsers, Smart TVs and Connected TVs
MIT License
306 stars 90 forks source link

`navigateByDirection` does not trigger `onArrowPress` handler #131

Open jakubvojacek opened 4 months ago

jakubvojacek commented 4 months ago

Describe the bug On LG, we support magic mouse and when active, we show buttons to go up and down. When clicked on, we callnavigateByDirection with up/down. In most cases, it works flawlessly but in some cases, we need a bit more special navigation and we handled that by adding onArrowPress listeners. But those are triggered only when the actual key is pressed, not when its "emulated"

Expected behavior Ideally, navigateByDirection should behave the same as if the user pressed the key. Or do you have some other better solution, please?

Additional context I think its because onArrowPress is processed outside of smartNavigate method https://github.com/NoriginMedia/Norigin-Spatial-Navigation/blob/main/src/SpatialNavigation.ts#L717

This could be a potential BC break for some people, I guess it might have to be activated with some feature flag?

xavi160 commented 4 months ago

Hello, thank you for the request.

onArrowPress was initially considered as a way to block the navigation on certain use cases but not to override the navigation behavior.

We're discussing internally improving the APIs to have better ways to let the user override this default behavior on specific subtrees.

Would you mind to share what you're trying to achieve so we can be sure it can be covered?

jakubvojacek commented 4 months ago

We have rows with media cards on homepage. And the first row is like a full width carousel (one card takes full width a& height of the viewport). And the second row and its cards overlaps a bit into the first row (in order for the user to know that there is content underneath and he should try to navigate down).

Because the two focusable items are overlapping, I decided to implement onArrowPress which works fine when using the keyboard. But on LG, the magic remote can be used and when activated, we display buttons up/down which trigger navigateByDirection. That works on all rows except for the first/second one due to the overlap.

If navigateByDirection would work the same as if the user pressed the key, that would solve it for me.

Thanks a lot