Can't assign keyboard focus to a TouchableHighlight inside a Flyout

[sayzenberg]

trafficstars

I have a Flyout that contains two TouchableHighlights. I want to assign keyboard focus to the second one in the tree, so I create and assign a ref to it. However, calling focus() doesn't actually assign focus to the second Touchable at all, and focus always goes to the first focusable element in the component. I can always tab to the intended element, but I can't directly focus it.

Environment

react-native-cli: 2.0.1 react-native: 0.60.0-microsoft.3 node: v10.16.0 npm: 6.9.0 yarn: 1.16.0 SDK: 10.0.18362 Target Device: Desktop VS 2019 Repros in Debug and Release

Steps to Reproduce

1. Create a Flyout with two TouchableHighlights in it.
2. Add a ref to the second TouchableHighlight.
3. Add a call to .focus() in ComponentDidMount()

Expected Behavior

Keyboard focus should default to the TouchableHighlight with the ref on it.

Actual Behavior

Keyboard focus defaults to the first TouchableHighlight, since it's the first focusable element in the View.

Reproducible Demo

I was able to repro this in RNTester. I updated view\src\RNTester\FlyoutExample.windows.tsx to do so. Here are the chunks I edited:

class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
  // tslint:disable-next-line:no-any
  private _anchor: any;
  private _anchorTwo: any;
  private _touchableRef: any; // added

public constructor(props: any) {
    super(props);
    this._anchor = React.createRef();
    this._anchorTwo = React.createRef();
    this._touchableRef = React.createRef(); //added
  }

//added
public componentDidUpdate() {
    if (this._touchableRef && this._touchableRef.current) {
      this._touchableRef.current.focus();
      console.log('Changing focus');
    }
  }

<Flyout
            isOpen={this.state.isFlyoutVisible}
            isLightDismissEnabled={this.state.isLightDismissEnabled}
            isOverlayEnabled={this.state.isOverlayEnabled}
            onDismiss={this._onFlyoutDismissed}
            target={this._anchor}
            placement={this.state.placementOptions}>
            <View
              style={{backgroundColor: 'lightgray', width: 300, height: 400}}>
            // added  
            <TouchableHighlight
                style={{width: 50, height: 50, backgroundColor: 'blue'}}
                accessibilityLabel="A blue box"
                accessibilityHint="A hint for the blue box."
                accessibilityRole="button">
                <Text>Blue</Text>
              </TouchableHighlight>
              <TouchableHighlight
                style={{width: 50, height: 50, backgroundColor: 'red'}}
                accessibilityLabel="A red box"
                accessibilityHint="A hint for the red box."
                accessibilityRole="button"
                ref={this._touchableRef}>
                <Text>Red</Text>
              </TouchableHighlight>**
             // end of addition
              <Text
                style={{
                  justifyContent: 'center',
                  paddingTop: 10,
                  paddingBottom: 30,
                }}>
                This is a flyout
              </Text>

_onFlyoutButtonPressed = () => {
    this.setState({buttonTitle: 'Open Flyout', isFlyoutVisible: false});
   // added below
    if (this._touchableRef && this._touchableRef.current) {
      console.log('Changing focus');
      this._touchableRef.current.focus();
    }
  };

[chrisglein]

We have a proposal that might help with this kind of scenario in a cleaner way: https://github.com/microsoft/react-native-windows/issues/3372 That said, it does seem like there's a bug here. Thanks for the helpful detailed repro! @KAnder425 you've been in the Flyout space, can you take a look at this and see what's going on?