Comments (7)
Hi.
If I understand the problem, it can be solved by subscribing to "onBecameFocused" callback of each Category and then updating the local state in your parent component to save the "currently focused Category" index or ID to highlight the corresponding item to the left.
from react-spatial-navigation.
Thanks for a quick response. I thought about that but its not working as the element on the right never gets focused. When the left navigation element is active the focus is set on it allowing to navigate up and down the list.
from react-spatial-navigation.
So you have one list that contains focusable elements (list to the left) and another scrolling view on the right that kind of "reacts" to focus changes when you move between items to the left? I still think it's enough to just subscribe to onBecameFocused
and then highlight/scroll to the Category on the right side. There is one list that is "leading", and another one is "following" the focus changes if I understand correctly.
from react-spatial-navigation.
I think you understand the problem correctly. However I want to be clear that the right column is also a navigation element. When I move to the right column there should be a separate navigation logic which is not the case of this problem.
I'm attaching the animation where first I move up and down the navigation on left and then I move to right navigation to navigate in items in categories.
from react-spatial-navigation.
I think you understand the problem correctly. However I want to be clear that the right column is also a navigation element. When I move to the right column there should be a separate navigation logic which is not the case of this problem.
...
Hello @AdamWu91!
Did you manage to resolve this issue?
We've implemented more or less a verbatim copy of what your animation shows in several applications and have not experienced the same problem, so I hope @asgvard's input above was clarification enough to get it working for you as intended.
If you are still stuck then please let us know and we'll do our best to help. It might be we are somehow misunderstanding the issue at hand.
Thanks,
@predikament
from react-spatial-navigation.
Hi,
The propose solution is not working for me. Could you send a code snippet of your implementation? This may clarify more what you had in mind, maybe I'm doing something wrong.
Thanks for your time!
from react-spatial-navigation.
Hi,
The propose solution is not working for me. Could you send a code snippet of your implementation? This may clarify more what you had in mind, maybe I'm doing something wrong.
Thanks for your time!
Hello again, @AdamWu91,
Sorry the solution does not seem to be working for you.
I would share a code-snippet, but our implementations are used primarily in proprietary customer solutions that we cannot really share openly.
Could we perhaps ask you to share a snippet of your current solution and we will do our best to point out what might need to be done to get it working as you intend?
Thanks in advance.
from react-spatial-navigation.
Related Issues (20)
- CSS gap:0 breaks navigation HOT 1
- Focus lost when Item Removed HOT 4
- Sometimes navigation doesn't work after go back to previous screen HOT 1
- a vulnerability CVE-2020-15168 is introduced in @noriginmedia/react-spatial-navigation HOT 2
- Focuses the second item in the list, after navigating from the fixed menu HOT 2
- Performance/Crash issue when load multiple rails and hold arrow keys to navigate HOT 1
- [Question]Can I use this package in a ReactJS project? HOT 4
- Focusable items hidden are able to be accessed. HOT 19
- withFocusable usage with forwardRef HOT 9
- Understanding of roadmap for library HOT 5
- more than 100 UI elements in funcational component taking too long to navigate. HOT 1
- 2-Directional Grid-type Items HOT 1
- display none control HOT 2
- Focus gets lost in case of collision HOT 3
- Track Child not recognizing children
- RTL is not supported
- Loss of focus when a component is rendered HOT 2
- Error when Server Side Rendering HOT 1
- Focusable elements not recognised when layout is position absolute HOT 5
- How should I handle focus when opening/closing a pop-up? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spatial-navigation.