Merge pull request Expensify#65194 from Eskalifer1/fix/65123-workspace-name-focus

fix/65123: Workspace name input focus

Author: luacmartins

src/components/ScreenWrapper/ScreenWrapperContainer.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef, ReactNode} from 'react';
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {forwardRef, useContext, useEffect, useMemo, useRef} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {Keyboard, PanResponder, View} from 'react-native';
 import {PickerAvoidingView} from 'react-native-picker-select';
@@ -18,9 +18,6 @@ import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 
 type ScreenWrapperContainerProps = React.PropsWithChildren<{
-    /** Ref for the screen wrapper container */
-    forwardedRef?: ForwardedRef<View>;
-
     /** A unique ID to find the screen wrapper in tests */
     testID: string;
 
@@ -86,28 +83,30 @@ type ScreenWrapperContainerProps = React.PropsWithChildren<{
     isFocused?: boolean;
 }>;
 
-function ScreenWrapperContainer({
-    forwardedRef,
-    children,
-    style,
-    testID,
-    bottomContent,
-    bottomContentStyle: bottomContentStyleProp,
-    keyboardAvoidingViewBehavior = 'padding',
-    keyboardVerticalOffset,
-    shouldEnableKeyboardAvoidingView = true,
-    shouldEnableMaxHeight = false,
-    shouldEnableMinHeight = false,
-    shouldEnablePickerAvoiding = true,
-    shouldDismissKeyboardBeforeClose = true,
-    shouldAvoidScrollOnVirtualViewport = true,
-    shouldUseCachedViewportHeight = false,
-    shouldKeyboardOffsetBottomSafeAreaPadding: shouldKeyboardOffsetBottomSafeAreaPaddingProp,
-    enableEdgeToEdgeBottomSafeAreaPadding,
-    includePaddingTop = true,
-    includeSafeAreaPaddingBottom = false,
-    isFocused = true,
-}: ScreenWrapperContainerProps) {
+function ScreenWrapperContainer(
+    {
+        children,
+        style,
+        testID,
+        bottomContent,
+        bottomContentStyle: bottomContentStyleProp,
+        keyboardAvoidingViewBehavior = 'padding',
+        keyboardVerticalOffset,
+        shouldEnableKeyboardAvoidingView = true,
+        shouldEnableMaxHeight = false,
+        shouldEnableMinHeight = false,
+        shouldEnablePickerAvoiding = true,
+        shouldDismissKeyboardBeforeClose = true,
+        shouldAvoidScrollOnVirtualViewport = true,
+        shouldUseCachedViewportHeight = false,
+        shouldKeyboardOffsetBottomSafeAreaPadding: shouldKeyboardOffsetBottomSafeAreaPaddingProp,
+        enableEdgeToEdgeBottomSafeAreaPadding,
+        includePaddingTop = true,
+        includeSafeAreaPaddingBottom = false,
+        isFocused = true,
+    }: ScreenWrapperContainerProps,
+    ref: ForwardedRef<View>,
+) {
     const {windowHeight} = useWindowDimensions(shouldUseCachedViewportHeight);
     const {initialHeight} = useInitialDimensions();
     const styles = useThemeStyles();
@@ -199,7 +198,7 @@ function ScreenWrapperContainer({
 
     return (
         <View
-            ref={forwardedRef}
+            ref={ref}
             style={[styles.flex1, {minHeight}]}
             // eslint-disable-next-line react/jsx-props-no-spreading, react-compiler/react-compiler
             {...panResponder.panHandlers}
@@ -234,5 +233,5 @@ function ScreenWrapperContainer({
 }
 ScreenWrapperContainer.displayName = 'ScreenWrapperContainer';
 
-export default React.memo(ScreenWrapperContainer);
+export default React.memo(forwardRef(ScreenWrapperContainer));
 export type {ScreenWrapperContainerProps};

src/components/ScreenWrapper/index.tsx

@@ -234,7 +234,7 @@ function ScreenWrapper(
     return (
         <FocusTrapForScreen focusTrapSettings={focusTrapSettings}>
             <ScreenWrapperContainer
-                forwardedRef={ref}
+                ref={ref}
                 style={[styles.flex1, style]}
                 bottomContent={bottomContent}
                 didScreenTransitionEnd={didScreenTransitionEnd}