search

NoriginMedia / Norigin-Spatial-Navigation

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

The focus is not reaching the intended destination. #107

Open GitHubShasiKumar opened 1 year ago

GitHubShasiKumar commented 1 year ago

Hi

I am using react-router-dom for routing in smart tv, when moving from one screen to another screen , The focus is not reaching the intended destination.

these the packages i am using

"@noriginmedia/norigin-spatial-navigation": "^2.1.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.18.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.0"

Here is the Screen recording to this issue

Please resolve this issue and provide any suggestions

thank you

GitHubShasiKumar commented 1 year ago

https://github.com/NoriginMedia/Norigin-Spatial-Navigation/assets/107665648/5365cc63-3255-4ae4-815c-ebe80dfb07d7

predikament commented 1 year ago

Hello @GitHubShasiKumar!

ℹ️ If you could please provide us with a sample of the code (e.g. a small Github project that reproduces the problem, a JSfiddle, or some code snippets, etc.) of what you are doing? This would make it much easier for us to troubleshoot and help you.

My first assumption is that some screen in the stack below still has focus; Are you setting focus in any way to the new screen/page/view which you are loading?

You could try calling focusSelf() from the container of the new view that is being opened, to make the focus be moved to your intended location. This approach is detailed in our documentation here: https://github.com/NoriginMedia/Norigin-Spatial-Navigation/#manually-setting-the-focus.

Note: I have closed issue #106 which you filed two days ago, as it seems to be very similar to this issue.

If you are having general focus issues then let's try to resolve the core issue at hand first.

Please try to refrain from opening multiple issues if they are related to the same topic, if possible. Thanks!

GitHubShasiKumar commented 1 year ago

HI @predikament
Thanks a lot for responding and thank you for the norigin spatial navigation package

This is my code that reproducing the issue ,I hope u resolve my issue

https://github.com/GitHubShasiKumar/Norigin-Smart-Tv-example

Thank you

GitHubShasiKumar commented 1 year ago

Hi @predikament

This issue particularly causing when i am going to previous screen from current screen,

I will navigate to second screen by clicking second touchable in first Screen, and when i am coming back to first screen the focus is going to first touchable its not reaching to second touchable as mentioned in the video, I hope you understand my scenario and problem

predikament commented 1 year ago

@GitHubShasiKumar: Thanks for sharing an example. We will have a look as soon as we can.

predikament commented 1 year ago

Adding reference to a similar'ish issue that was related to react-router-dom: https://github.com/NoriginMedia/Norigin-Spatial-Navigation/issues/25#issuecomment-1482736424

Example: https://github.com/lmalom/Routing-Norigin-Spatial-Navigation/tree/main

"react-router-dom": "^6.9.0"

Might be there are some issues integrating it with our library, or some general guidelines that are needed to be added to the documentation. We will need to use these examples and investigate.