[Feature] Reset last saved child focus

[LynchyC]

When using the app there are certain scenarios that I would like to reset a components last saved child focus.

https://codesandbox.io/s/dank-wildflower-os0it1

Describe the solution you'd like

It may be buggy in parts, but the code linked above shows different content being shown for each of the Tabs. I have a keyup window listener set inside the ContentRows component.

If a user is navigating down the ContentRows for that selected tab and they press the Backspace key, I would like the Tabs list to be focused and the ContentRows component to be scrolled back up to the top (focusing on the first ContentRow).

The problem I am encountering is that once you have focused back on the Tab and the user presses the down key, they will go right back to the last ContentRow that was focused instead of the intended first row.

There is also the added caveat where I want the focus to be reset on the backspace key event listener, but is maintained if go left to the sidebar and come back.

[predikament]

I'll discuss a bit internally on how to do this, to see if it's worth adding a way of resetting the focused child.

In the meantime however, as a workaround I would assume you could give the items predictable focusKey values, which you could use to explicitly set the focus back to the first item in the row (and scroll the container to 0 on the X-axis, I guess), at the same time as you scroll up to your tabs, then set the focus to your tab's parent?

I guess the code might end up looking a bit odd, of course:

setFocus(FIRST_ITEM_IN_ROW);
// Scroll X..
setFocus(YOUR_COOL_TAB_CONTAINER);
// Scroll Y

But I think that should work.. Could you try that workaround as a temporary measure for what you're trying to achieve, @LynchyC?

Maybe there's a better way of accomplishing this that I am not thinking of, @asgvard?

[LynchyC]

Thank you for getting back to me @predikament.

When pressing Backspace, I want the focus to go to the selected Tab and as a side effect, also set the child's focus of that tabs' page to the first ContentRow (Y Axis).

Using your code snippet above, if I set the focus to the first ContentRow, the onRowFocus callback will fire and scroll to it. The only issue is that I am not sure when it will complete for me to then call setFocus(YOUR_COOL_TAB_CONTAINER).

I could set up an interval to check the scrollTop of the ContentRow container whilst having some kind of isResetting ref to further hone in the logic? Or use something like tweenjs to achieve the scroll effect and make use of the onComplete callback to set the Tab focus after the ContentRow scrolling has successfully finished?

[predikament]

@LynchyC: Is this still an issue you are having, or have you since figured out how to resolve it? ☺️

Let us know, otherwise we'll close this issue if it becomes too stale. Thanks!

[LynchyC]

@predikament I have unfortunately moved onto a different project so I have not been using this library as of late.

I will close the issue for now and maybe someone can use it as a reference in the future.