Focus lost when Item Removed

[stuartflanagan]

Describe the bug Focus is lost when focused item is removed from the DOM

To Reproduce Steps to reproduce the behavior: Page loads focus is set to a previous item. That item is removed from the DOM Navigation control is lost

Expected behavior Would think a navigation should re focus to the next available item.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

[stuartflanagan]

I have added an onBecameBlurred to the items as well to try and catch this but that does not fire either. Is there a suggested way to handle this scenario?

[asgvard]

This behavior should be automatically enabled with the "autoRestoreFocus" flag. When the element is unmounted, the parent component will try to focus the next available child. However if there is no available children after the removal, it won't focus anything. But you can always manually focus something else with "setFocus(focusKey)" if you know that you are removing the last child in the group.

[stuartflanagan]

There are a lot of other child elements to focus here. I have not had any luck with seeing the effect of autoRestoreFocus working? We have a rail of items and when a user removes one and goes back to the aggregation page they are focused on the item that was just removed. It has many siblings but the focus is just lost.

[asgvard]

This library has migrated here: https://github.com/NoriginMedia/Norigin-Spatial-Navigation It's a new implementation with TS and Hooks.

Regarding this specific issue, we might need a full code example to understand what is happening there, it seems like it not only involves the sibling elements, but also navigation between pages.

This part of the code handles this case. When the component is Removed, it will try to focus some other child of the parent component: https://github.com/NoriginMedia/react-spatial-navigation/blob/master/src/spatialNavigation.js#L840