Expand defaultTabbableElement to accept a string corresponding a child element's nativeID (#3863)

* Expand defaultTabbableElement to accept a string corresponding a child element's nativeID

* Change files

Author: PPatBoyd

apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -220,7 +220,54 @@ const FocusZoneTextInput: React.FunctionComponent = () => {
   );
 };
 
+export const FirstFocusTest = () => {
+  const outerNormalRef = React.useRef(null);
+  const innerNormalRef = React.useRef(null);
+  const innerDirectRef = React.useRef(null);
+  const innerFZRef = React.useRef(null);
+  const outerNativeID = 'nativeIDToOuterButton';
+  const innerNativeID = 'nativeIDToInnerButton';
+  const innerDirectNativeID = 'nativeIDDirectToInnerButton';
+  const [outerFocusZoneTabbableElement, setOuterFocusZoneTabbableElement] = React.useState<React.RefObject<View> | string>();
+  const [innerFocusZoneTabbableElement, setInnerFocusZoneTabbableElement] = React.useState<React.RefObject<View> | string>();
+
+  return (
+    <FocusZone defaultTabbableElement={outerFocusZoneTabbableElement} tabKeyNavigation="Normal">
+      <View>
+        <Button onClick={() => setOuterFocusZoneTabbableElement(undefined)}>clear OuterFocusZone</Button>
+        <Button componentRef={outerNormalRef} onClick={() => setOuterFocusZoneTabbableElement(outerNormalRef)}>
+          Test ref
+        </Button>
+        <Button nativeID={outerNativeID} onClick={() => setOuterFocusZoneTabbableElement(outerNativeID)}>
+          Test nativeId
+        </Button>
+      </View>
+      <FocusZone componentRef={innerFZRef} defaultTabbableElement={innerFocusZoneTabbableElement}>
+        <Button onClick={() => setInnerFocusZoneTabbableElement(undefined)}>clear InnerFocusZone</Button>
+        <Button componentRef={innerDirectRef} onClick={() => setOuterFocusZoneTabbableElement(innerDirectRef)}>
+          Test nested (direct ref)
+        </Button>
+        <Button nativeID={innerDirectNativeID} onClick={() => setOuterFocusZoneTabbableElement(innerDirectNativeID)}>
+          Test nested (direct nativeID)
+        </Button>
+        <Button componentRef={innerNormalRef} onClick={() => setInnerFocusZoneTabbableElement(innerNormalRef)}>
+          Test inner zone (ref)
+        </Button>
+        <Button nativeID={innerNativeID} onClick={() => setInnerFocusZoneTabbableElement(innerNativeID)}>
+          Test inner zone (nativeID)
+        </Button>
+        <Button onClick={() => setOuterFocusZoneTabbableElement(innerFZRef)}>Test nested (transitive)</Button>
+      </FocusZone>
+    </FocusZone>
+  );
+};
+
 const focusZoneSections: TestSection[] = [
+  {
+    name: 'First Focus FocusZone Usage',
+    component: FirstFocusTest,
+    testID: FOCUSZONE_TESTPAGE,
+  },
   {
     name: 'Common FocusZone Usage',
     component: CommonUsageFocusZone,

change/@fluentui-react-native-focus-zone-5e09f79f-af2a-42ac-87b1-6d371ac35221.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Expand defaultTabbableElement to accept a string corresponding a child element's nativeID",
+  "packageName": "@fluentui-react-native/focus-zone",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-8e39468c-ebcc-48c0-b17d-9372d91dd600.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Expand defaultTabbableElement to accept a string corresponding a child element's nativeID",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/FocusZone/src/FocusZone.ts

@@ -23,12 +23,14 @@ export const FocusZone = composable<FocusZoneType>({
 
     const ftzRef = useViewCommandFocus(componentRef);
 
-    const [targetNativeTag, setTargetNativeTag] = React.useState<number>(undefined);
+    const [targetFirstFocus, setTargetFirstFocus] = React.useState<number | string>(undefined);
     React.useLayoutEffect(() => {
-      if (defaultTabbableElement?.current) {
-        setTargetNativeTag(findNodeHandle(defaultTabbableElement.current));
+      if (typeof defaultTabbableElement === 'string') {
+        setTargetFirstFocus(defaultTabbableElement);
+      } else if (defaultTabbableElement?.current) {
+        setTargetFirstFocus(findNodeHandle(defaultTabbableElement.current));
       } else {
-        setTargetNativeTag(undefined);
+        setTargetFirstFocus(undefined);
       }
     }, [defaultTabbableElement]);
 
@@ -37,7 +39,7 @@ export const FocusZone = composable<FocusZoneType>({
         root: {
           navigateAtEnd: isCircularNavigation ? 'NavigateWrap' : 'NavigateStopAtEnds', // let rest override
           ...rest,
-          defaultTabbableElement: targetNativeTag,
+          defaultTabbableElement: targetFirstFocus,
           ref: ftzRef,
         },
       }),

packages/components/FocusZone/src/FocusZone.types.ts

@@ -17,7 +17,7 @@ export type FocusZoneProps = IViewProps & {
   /**
    * Optionally defines the initial tabbable element inside the FocusZone
    */
-  defaultTabbableElement?: React.RefObject<React.Component>;
+  defaultTabbableElement?: React.RefObject<React.Component> | string;
 
   /**
    ** Defines which arrows to react to