Fix/10731 auto focus input

src/components/Composer/implementation/index.tsx

@@ -281,24 +281,28 @@ function Composer(
         onClear(currentText);
     }, [onClear, onSelectionChange]);
 
-    useImperativeHandle(ref, () => {
-        const textInputRef = textInput.current;
-        if (!textInputRef) {
-            throw new Error('textInputRef is not available. This should never happen and indicates a developer error.');
-        }
+    useImperativeHandle(
+        ref,
+        () => {
+            const textInputRef = textInput.current;
+            if (!textInputRef) {
+                throw new Error('textInputRef is not available. This should never happen and indicates a developer error.');
+            }
 
-        return {
-            ...textInputRef,
-            // Overwrite clear with our custom implementation, which mimics how the native TextInput's clear method works
-            clear,
-            // We have to redefine these methods as they are inherited by prototype chain and are not accessible directly
-            blur: () => textInputRef.blur(),
-            focus: () => textInputRef.focus(),
-            get scrollTop() {
-                return textInputRef.scrollTop;
-            },
-        };
-    }, [clear]);
+            return {
+                ...textInputRef,
+                // Overwrite clear with our custom implementation, which mimics how the native TextInput's clear method works
+                clear,
+                // We have to redefine these methods as they are inherited by prototype chain and are not accessible directly
+                blur: () => textInputRef.blur(),
+                focus: () => textInputRef.focus(),
+                get scrollTop() {
+                    return textInputRef.scrollTop;
+                },
+            };
+        },
+        [clear],
+    );
 
     const handleKeyPress = useCallback(
         (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {

src/pages/home/ReportScreen.tsx

@@ -266,6 +266,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
     const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '-1'}`];
     const isTopMostReportId = currentReportID === reportIDFromRoute;
     const didSubscribeToReportLeavingEvents = useRef(false);
+    const [showSoftInputOnFocus, setShowSoftInputOnFocus] = useState(false);
 
     useEffect(() => {
         if (!report?.reportID || shouldHideReport) {
@@ -711,7 +712,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
                 <ScreenWrapper
                     navigation={navigation}
                     style={screenWrapperStyle}
-                    shouldEnableKeyboardAvoidingView={isTopMostReportId || isInNarrowPaneModal}
+                    shouldEnableKeyboardAvoidingView={(isTopMostReportId || isInNarrowPaneModal) && showSoftInputOnFocus}
                     testID={`report-screen-${reportID ?? ''}`}
                 >
                     <FullPageNotFoundView
@@ -808,6 +809,8 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
                                         isComposerFullSize={!!isComposerFullSize}
                                         lastReportAction={lastReportAction}
                                         workspaceTooltip={workspaceTooltip}
+                                        showSoftInputOnFocus={showSoftInputOnFocus}
+                                        setShowSoftInputOnFocus={setShowSoftInputOnFocus}
                                     />
                                 ) : null}
                             </View>

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

@@ -141,6 +141,12 @@ type ComposerWithSuggestionsProps = Partial<ChildrenProps> & {
 
     /** policy ID of the report */
     policyID: string;
+
+    /** Whether the soft keyboard is open */
+    showSoftInputOnFocus: boolean;
+
+    /** A method to update showSoftInputOnFocus */
+    setShowSoftInputOnFocus: (value: boolean) => void;
 };
 
 type SwitchToCurrentReportProps = {
@@ -225,6 +231,8 @@ function ComposerWithSuggestions(
 
         // For testing
         children,
+        showSoftInputOnFocus,
+        setShowSoftInputOnFocus,
     }: ComposerWithSuggestionsProps,
     ref: ForwardedRef<ComposerRef>,
 ) {
@@ -274,8 +282,6 @@ function ComposerWithSuggestions(
 
     const [composerHeight, setComposerHeight] = useState(0);
 
-    const [showSoftInputOnFocus, setShowSoftInputOnFocus] = useState(false);
-
     const textInputRef = useRef<TextInput | null>(null);
 
     const syncSelectionWithOnChangeTextRef = useRef<SyncSelection | null>(null);

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -87,6 +87,12 @@ type ReportActionComposeProps = Pick<ComposerWithSuggestionsProps, 'reportID' |
 
     /** Should show educational tooltip */
     shouldShowEducationalTooltip?: boolean;
+
+    /** Whether the soft keyboard is open */
+    showSoftInputOnFocus: boolean;
+
+    /** A method to update showSoftInputOnFocus */
+    setShowSoftInputOnFocus: (value: boolean) => void;
 };
 
 const willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutsideFunc();
@@ -104,8 +110,10 @@ function ReportActionCompose({
     isReportReadyForDisplay = true,
     lastReportAction,
     shouldShowEducationalTooltip,
+    showSoftInputOnFocus,
     onComposerFocus,
     onComposerBlur,
+    setShowSoftInputOnFocus,
 }: ReportActionComposeProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -487,6 +495,8 @@ function ReportActionCompose({
                                                 }
                                                 validateCommentMaxLength(value, {reportID});
                                             }}
+                                            showSoftInputOnFocus={showSoftInputOnFocus}
+                                            setShowSoftInputOnFocus={setShowSoftInputOnFocus}
                                         />
                                         <ReportDropUI
                                             onDrop={(event: DragEvent) => {

src/pages/home/report/ReportFooter.tsx

@@ -62,6 +62,12 @@ type ReportFooterProps = {
 
     /** A method to call when the input is blur */
     onComposerBlur: () => void;
+
+    /** Whether the soft keyboard is open */
+    showSoftInputOnFocus: boolean;
+
+    /** A method to update showSoftInputOnFocus */
+    setShowSoftInputOnFocus: (value: boolean) => void;
 };
 
 function ReportFooter({
@@ -73,8 +79,10 @@ function ReportFooter({
     isReportReadyForDisplay = true,
     isComposerFullSize = false,
     workspaceTooltip,
+    showSoftInputOnFocus,
     onComposerBlur,
     onComposerFocus,
+    setShowSoftInputOnFocus,
 }: ReportFooterProps) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
@@ -225,6 +233,8 @@ function ReportFooter({
                             isComposerFullSize={isComposerFullSize}
                             isReportReadyForDisplay={isReportReadyForDisplay}
                             shouldShowEducationalTooltip={didScreenTransitionEnd && shouldShowEducationalTooltip}
+                            showSoftInputOnFocus={showSoftInputOnFocus}
+                            setShowSoftInputOnFocus={setShowSoftInputOnFocus}
                         />
                     </SwipeableView>
                 </View>
@@ -244,6 +254,7 @@ export default memo(
         prevProps.lastReportAction === nextProps.lastReportAction &&
         prevProps.isReportReadyForDisplay === nextProps.isReportReadyForDisplay &&
         prevProps.workspaceTooltip?.shouldShow === nextProps.workspaceTooltip?.shouldShow &&
+        prevProps.showSoftInputOnFocus === nextProps.showSoftInputOnFocus &&
         lodashIsEqual(prevProps.reportMetadata, nextProps.reportMetadata) &&
         lodashIsEqual(prevProps.policy?.employeeList, nextProps.policy?.employeeList) &&
         lodashIsEqual(prevProps.policy?.role, nextProps.policy?.role),

tests/perf-test/ReportActionCompose.perf-test.tsx

@@ -96,6 +96,8 @@ function ReportActionComposeWrapper() {
                 disabled={false}
                 report={LHNTestUtils.getFakeReport()}
                 isComposerFullSize
+                showSoftInputOnFocus={false}
+                setShowSoftInputOnFocus={() => {}}
             />
         </ComposeProviders>
     );