UI: Non visible elements should be hidden

[akinsho]

If a Revery component has focus but then is no longer rendered, the focus attribute is still populated by the now invisible element. If an element is no longer visible it should also not be focused.

[bryphe]

Ah, interesting! Thanks for the issue @Akin909 .

I think there are two cases to consider here:

• Case 1: Focused node was removed from the node tree
• Case 2: Focused node is not visible (ie, opacity = 0.0)

In Case 1, we'd want to relinquish focus, but not necessarily Case 2.

[akinsho]

@bryphe does rendering empty i.e. React.listToElement([]) remove the node from the tree?, re 2 I agree the behaviour in the case isn't 100% clear or necessarily what a user would be expecting

[bryphe]

@bryphe does rendering empty i.e. React.listToElement([]) remove the node from the tree?

If there was a node rendering the component, and then something triggered a state change to cause React.empty/React.listToElement([]) to be rendered - the previous element should be removed 👍

re 2 I agree the behaviour in the case isn't 100% clear or necessarily what a user would be expecting

I know some web apps actually depend on this behavior - there were some that would 'hijack' the input by having an invisible textbox follow the UI (it was better for perf to have a single input element than many across the page, etc) - at least in the older web days 😄

[wishfoundry]

re 2 I agree the behaviour in the case isn't 100% clear or necessarily what a user would be expecting

I know some web apps actually depend on this behavior - there were some that would 'hijack' the input by having an invisible textbox follow the UI

Is that the best proof for that assumption? With the right accessibility model, that type of hackery would hopefully be unnecessary some examples for arguments sake:

• if we assume a tree-like model with a cursor to represent the navigable elements, then when an element is removed yield focus to nearest parent
• if we assume a flat list of navigable elements, then when an element is remove we decrement the cursor to the nearest usable element

I've can't count how many times I'v had to code around browsers requiring element requires a minimum of 0.00001 opacity, and height/width > 0 to be rendered. There seems some precedent at least for some level render optimizations For instance, if we have animated collapsing menu list currently focused, which is then animated to 0 width, do we really expect the focus to remain there? Should we then only return focus when the menu explicitly yields control back? That feels a bit cumbersome