Check visibility for navigation

[simeonradivoev]

It is often useful to hide elements based on CSS. Should be fairly easy to check if an element is visible and be added alongside the focusable check. This messes up with navigation by navigating to an element and getting locked (not sure why it can navigate when visibility is set to hidden in the first place)

Workaround

Currently you can manually update the focusable based on the the visibility, But that ads overhead having to update on each visibility check and if you want to check parents you have to listen for their changes as well. I did it in a hack way by intercepting the addFocusable method and adding this:

  component.focusableDefault = toAdd.focusable;
  Object.defineProperty(component, 'focusable', { get () { return this.focusableDefault && this.node.checkVisibility({ visibilityProperty: true }); }, set (value: boolean) { this.focusableDefault = value; } });

Issues

One issue I can see is if you want to have an element that is already focused and goes invisible you have to update the layout or something. Another one is if you want to intentionally focus on hidden elements, say a popup. Maybe it should be opt in or opt out.

[simeonradivoev]

Actually found more success in doing this as a workaround:

SpatialNavigation.sortSiblingsByPriority = (siblings, currentLayout, direction, focusKey) =>
{
  const sorted = sortSiblingsByPriority(siblings, currentLayout, direction, focusKey);
  return sorted.filter(e => e.node.checkVisibility({ visibilityProperty: true }));
};

This works for avoid only actively navigating into hidden elements. Solves the popup focus issue.

[predikament]

@simeonradivoev Hello! Looks like you answered your own question above. Glad you found a solution.

Any particular reason you can't just set focusable: false when you hide your element via CSS?
You mention overhead, but I think that overhead should be negligible in the grand scheme of things.

Perhaps you could provide a (short) example of your project setup and the problem, for us to better understand why this is an issue?

[simeonradivoev]

https://github.com/simeonradivoev/gameflow-deck this is my use case. In my case it's just responsive app that changes elements a lot by CSS only. Like say for mobile or smaller display it will hide focusable elements, and sometimes focus was still working from them, but when it was gained you can't exit out since they are not visible and that brakes navigating out but not in, not sure why. But yes hooking into sortSiblingsByPriority worked out perfectly for this use case. Was just annoyed it was hard to hook to visibility change events in react based on css.