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

2-Directional Grid-type Items #113

Closed MelEnt closed 1 year ago

MelEnt commented 2 years ago

Hi! Been using the library for quite some time now developing a Samsung app for Tizen v.3. My goal is to publish the app to the Samsung store, and Samsung provides a UI/UX checklist of items you need to finish.

Specifically this is the issue I was stuck on: https://developer.samsung.com/smarttv/design/input-methods.html#2-directional-grid-type-items

Screenshot 2022-01-28 at 15 17 12

So the image describes how the navigation should behave, which is; next focusable element should be the one closest to the one you currently focus. Currently, my app is not behaving in this way and always reaches for the first focusable item onto a vertical list, despite whichever position you came from.

Primarily, I'd like to know if this behaviour is supported out-of-the-box? Has anyone had any experience with this issue before?

I'm leaning towards implementing this behaviour myself using the callback from onBecameFocused which provides container props and element X-position etc.

PS. Awesome library. Your work is very much appreciated!

predikament commented 2 years ago

Hello @MelEnt,

Thanks for getting in touch. Happy to hear you are finding our library is useful.

In regards to your question:

Primarily, I'd like to know if this behaviour is supported out-of-the-box? Has anyone had any experience with this issue before?

This behavior is unfortunately not supported currently. At the moment it will focus the first focusable child, if it's the first time focusing that group of focusable items, or (if forgetLastFocusedChild is true for the parent, which is the default behavior) it would restore focus to the last focused child, in the case of any children of that component having been focused before.

We are planning on adding support for this kind of navigational logic as part of our upcoming improvements though, as it is something we have had multiple requests for and it is a reasonable thing to want to achieve. I do however not currently have a hard deadline for when that will be available, but I am hoping these changes will be in place over the next few months.

By the way, I appreciate your detailed and well explained question - Very clear and understandable, especially with the sketches. Cheers!

Thanks, @predikament.