react-key-navigation
react-key-navigation copied to clipboard
dead
Need help with focus on the dynamic particular element.
How can i put focus on the fourth element in the second vertical list programmatically.
If you pass forceFocus={true} props to the fourth Focusable element it will be focused when the component mount.
Thank you! But i create the sidebar component when my main component render. I do this because key-navigation doesn't work correct with many dynamic elements. I forced create all my focusable components when my main component render and set for them for example 'display: none'. My component mount 1 time and never unmounted while i am on the main component.
When i used forseFocus props, it works.
But when i clicked UP, focus went on the first element, not on the third.
Sorry, i don't understand how it works.
<VerticalList>
{this.state.dynamicInsert && <Search text="inserted!!" />}
</VerticalList>
In example which i found in the issue#3 it doesn't work.
Did you update to 0.0.10? The same example in #3 with version 0.0.10 https://codesandbox.io/s/50xy2z3244
<VerticalList>
{this.state.dynamicInsert && <Search text="inserted!!" />}
</VerticalList>
The code above works in version 0.0.9 because the "VerticalList" is already monted, so when the dynamic component is inserted it will be in the correct order/position (the first element of that VerticalList). Same example in #3 using the code above
In version 0.0.10 you don't need VerticalList because it will re-order the children components when the parent component is updated. So just using {this.state.dynamicInsert && <Search text="inserted!!" />} should be fine.
But i need one horizontal list which include 2 vertical lists. The first list for seasons and the second for the series. When i remove Vertical list it doesn't work correct.
And i get new error with version 0.0.10 when i re-render component withe series.
Could you tell me what will i need change in my code. I tried to do as you wrote, but it doesn't help me.
May be i can't use array with dynamic elements?
Hello, i have new problem with focusable elements after update. I try to explain it soon. But old problem with correct KEY UP and KEY DOWN isn't fixed.
https://youtu.be/mCmKylez4s4
Now i can't switch to window with PLAY button when i press KEY_UP.
This element doesn't dynamic. It has diplay:none. When data are received element is changed display to flex. In the version 0.0.10 it works good, but now it doesn't work.
Main component with navigation:
Menu component
ContentList component (films posters).
I don't know if i explained well. I will record video if you don't understand my problem.
I noticed that the focus is lost when the component is updated. In my case it happened when i get new data from redux. It starts to work incorrectly.
Thanks for the feedback! But I couldn't reproduce your error...
Can you change to mount the component only when it should be visible?
That is the only thing that could bug the navigation system because even though it is not visible the navigation is not aware of that. If that is your problem I can create a props disabled that would make the navigation ignore it.
Thank you, this props will be good. On this week i'll try to find, where i get this problem. I'll write about it soon.
Now i describe other problems, which i noticed.
- When my project was downloaded i see some react-dom errors in the console. Without last warning.
- I have search keyboard with focusable buttons, but it doesn't that behaviour which i wanted. https://youtu.be/VAT4_FTInoE
When I focus keyboard and press KEYDOWN i want to go on the second row not ont the menu below.
This is the keyboard code:
This is the Menu code which include keyboard
- Bug with dynamic element when it appears.
https://youtu.be/ibXfLau5IL4
this element
I tried dynamical elements in more simple component, but it doesn't work too.
I have Tv component with navigation and other components.
Sidebar same as in your example in youtube-tv.
List with tv channels which i get from ajax
And list items
Focus works only on sidebar static element, when i get tv channels list from ajax, they don't get focus. video https://youtu.be/l4VPEaWwYGg
Update to v.0.0.12 https://codesandbox.io/s/622xk79vvw and now this example work 😄
Hello i noticed another problem.
When i render Focusable items as in this example this code works good.
But when i render Focusable element in the component as in this example it works one time. Sidebar open and close. But then i don't focus this sidebar.
This is component which include focusable.
Can you reproduce this in codesandbox? I tried https://codesandbox.io/s/ryrnxz902n but it works
Yes, it's working. Thank you. Did you add props "disabled"? And how can i set navDeafult on the vertical list which include dynamic elements?
Still haven't added the disabled props. The navDeafult sets the element the navigation will focus when it will lose a focus or the when the navigation start (after loading the page). You want something that when you enter a VerticalList it will focus a specific element?
It would be nice:
- when I enter a VerticalList it will focus a specific element.
- when i have opportunity to set navDefault on the VerticalList which doesn't has children elements, but it is going to get them from ajax.