Safer focus lost behavior

[ahimberg]

Proposal: Safer focus lost behavior

Summary

In Xaml, when the focused control is removed from the visual tree, focus moves to the first element in the window. This differs from other platforms (I don't know how each works, but Xaml seems uniquely extreme in this) - I believe most platforms will find the nearest focusable element or at least keep focus in the same 'window' if focus was in a flyout or subwindow.

Motivation

We have had multiple bugs in our current usage of RNW where a render() update removes the focused element. We've had to add code outside of RNW to notice when this is happening and restore focus back into the RNW control.

vnext's 'safe harbor' feature which when calling blur() will move focus to the root of the reactcontrol is perhaps part of a solution - if it also worked to safe harbor within the nearest 'window' and not just the root. Requiring the call to blur() is also a problem though if its not needed on other platforms. react-native developers on other platforms are unlikely to be aware of this Xaml behavior and some kind of 'auto-blur' behavior on removal seems desirable.

Basic example

Have a RN layout where a Touchable's onPress will re-render and create a different tree with different buttons. Focus will jump to the root of the window. If doing this in a flyout, focus jumps all the way to parent window root.

Open Questions

I attempted to start implementing this just using the current safe harbor, by checking if the current view being removed is the focused element.

1. That wouldn't solve the sub-window case
2. When re-rendering a tree of elements, the elements much higher in the tree are going to be removed first. So instead of checking if the view being removed is focused, I had to check if the focused element is a child of the view being removed. I wasn't sure of an efficient check for this and ended up having to walk all the parents up to the root from the focused element seeing it one of them was the element being removed.
3. On RS4+ Platforms OnLosingFocus() could maybe be used to help with this. Thats what we did with our LivePersonaCard feature, but it didn't work on RS3 due to unavailable APIs. The app there notices focus movement and closes flyouts automatically on focus lost - fixing focus quickly isn't enough since nothing is async in the flyout manager.

[chrisglein]

@harinikmsft @licanhua This looks like it needs some design to it. Can you take a look and come up with a proposal?

[harinikmsft]

#5706 is linked to this, if we add a more sophisticated focus management system in RN, we may be able to address issues like this a bit more intuitively.