Need help with focus on the dynamic particular element.

[pahonski]

How can i put focus on the fourth element in the second vertical list programmatically.

[dead]

If you pass forceFocus={true} props to the fourth Focusable element it will be focused when the component mount.

[pahonski]

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.

[dead]

Just fixed #3.
Maybe that will help you.

[pahonski]

When i used forseFocus props, it works.

But when i clicked UP, focus went on the first element, not on the third.

[pahonski]

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.

[dead]

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.

[pahonski]

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?

[pahonski]

https://youtu.be/bSeYduApEc4
I attached video with problem.

[dead]

I think I found out what was your problem, I'm going to fix it soon.

[pahonski]

I'm looking forward to fix this problem.

[dead]

Please try the v0.0.11

[pahonski]

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.

[pahonski]

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.