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.

[pahonski]

https://youtu.be/t7VmV8o5dCo

In this video i compare version 9 and 11

[pahonski]

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.

[dead]

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.

[pahonski]

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.

[pahonski]

Now i describe other problems, which i noticed.

1. When my project was downloaded i see some react-dom errors in the console. Without last warning.
2. 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

[pahonski]

3. Bug with dynamic element when it appears. https://youtu.be/ibXfLau5IL4 this element

[pahonski]

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

[pahonski]

I added code on the codesandbox.

https://codesandbox.io/s/xlnvr9zr9w

[dead]

Update to v.0.0.12 https://codesandbox.io/s/622xk79vvw and now this example work 😄

[pahonski]

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.

[dead]

Can you reproduce this in codesandbox? I tried https://codesandbox.io/s/ryrnxz902n but it works

[pahonski]

Maybe this video can help. https://youtu.be/nHktSpwZ168

[pahonski]

I found this bug. https://codesandbox.io/s/72o5yj4mn1

[dead]

Can you try the new version (v0.0.13)?

[pahonski]

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?

[dead]

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?

[pahonski]

It would be nice: 1) when I enter a VerticalList it will focus a specific element. 2) 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.

[pahonski]

And props "disabled" :)

[pahonski]

Hello, are you going to make changes soon?

[pahonski]

How can i clean this list http://joxi.ru/brRgav6i7Qaeam. When i create a lot of dynamic elements this list gets bigger and bigger.

[dead]

Hey, I kind busy this week, so I'm not sure if i will able to do something.

Does this list cause you performance issues? I only use that to keep a reference of the focusable components.

[pahonski]

What about this? It is very important. http://joxi.ru/VrwyVZlI7OKjO2

About performance. Now i don't have problems but in future it might be.

[pahonski]

Hello, i have a new problem with forceFocus. In this app i show a simple example. https://codesandbox.io/s/72o5yj4mn1

I tried forceFocus from left sidebar. I have to focus right items when I press SPACE button. It works, but then when i return on the left sidebar after this manipulations, KEY_UP and KEY_DOWN doesn't work.

When i have to change SPACE (which i described above) on KEY_LEFT? Can I use event.stopPropagation and forceFocus?

[pahonski]

Could you fix at least this bug please?

[dead]

I going to try fixing this issue tomorrow.

[pahonski]

Thank you. I will looking forward to.

[dead]

Sorry, I'm not going to be able to fix that today. I'm without internet at home. Hope I can fix it Monday.

[pahonski]

Sure. I hope it too.

[pahonski]

Unfortunately forceFocuses don't work anywhere :( I noticed that things which worked before, don't work now.

[dead]

Yeah, I tried to fix the issue yesterday, but no success. The problem all comes down to the issue #3. The "solution" I found is wrong and doesn't work properly at all. Probably I will need to rewrite most part of the library to work around this (and not even sure if this is possible).

I recommend you to try https://github.com/dead/react-js-spatial-navigation or even the pure js library https://github.com/luke-chang/js-spatial-navigation

[pahonski]

We wrote much code with your library. Could you finish some important things for a fee?

[pahonski]

Thank you for a help. I'll try your library https://github.com/dead/react-js-spatial-navigation. But i don't see in it forceFocus :).