Merge pull request #46172 from bernhardoj/fix/46134-cant-close-keyboard

Expensify · Jul 29, 2024 · 48e8017 · 48e8017
2 parents 5b99455 + b67d261
commit 48e8017
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 13 deletions.
diff --git a/src/hooks/useAutoFocusInput.ts b/src/hooks/useAutoFocusInput.ts
@@ -1,12 +1,14 @@
 import {useFocusEffect} from '@react-navigation/native';
 import {useCallback, useContext, useEffect, useRef, useState} from 'react';
+import type {RefObject} from 'react';
 import type {TextInput} from 'react-native';
 import {InteractionManager} from 'react-native';
 import CONST from '@src/CONST';
 import * as Expensify from '@src/Expensify';
 
 type UseAutoFocusInput = {
     inputCallbackRef: (ref: TextInput | null) => void;
+    inputRef: RefObject<TextInput | null>;
 };
 
 export default function useAutoFocusInput(): UseAutoFocusInput {
@@ -55,5 +57,5 @@ export default function useAutoFocusInput(): UseAutoFocusInput {
         setIsInputInitialized(true);
     };
 
-    return {inputCallbackRef};
+    return {inputCallbackRef, inputRef};
 }
diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx
@@ -162,8 +162,10 @@ function PrivateNotesEditPage({route, personalDetailsList, report, session}: Pri
                             if (!el) {
                                 return;
                             }
+                            if (!privateNotesInput.current) {
+                                updateMultilineInputRange(el);
+                            }
                             privateNotesInput.current = el;
-                            updateMultilineInputRange(privateNotesInput.current);
                         }}
                         isMarkdownEnabled
                     />

diff --git a/src/pages/RoomDescriptionPage.tsx b/src/pages/RoomDescriptionPage.tsx
@@ -90,8 +90,10 @@ function RoomDescriptionPage({report, policies}: RoomDescriptionPageProps) {
                                 if (!el) {
                                     return;
                                 }
+                                if (!reportDescriptionInputRef.current) {
+                                    updateMultilineInputRange(el);
+                                }
                                 reportDescriptionInputRef.current = el;
-                                updateMultilineInputRange(el);
                             }}
                             value={description}
                             onChangeText={handleReportDescriptionChange}

diff --git a/src/pages/iou/request/step/IOURequestStepDescription.tsx b/src/pages/iou/request/step/IOURequestStepDescription.tsx
@@ -178,8 +178,10 @@ function IOURequestStepDescription({
                             if (!el) {
                                 return;
                             }
+                            if (!inputRef.current) {
+                                updateMultilineInputRange(el);
+                            }
                             inputRef.current = el;
-                            updateMultilineInputRange(inputRef.current);
                         }}
                         autoGrowHeight
                         maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}

diff --git a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx
@@ -44,7 +44,7 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe
     const {keyboardHeight} = useKeyboardState();
     const {windowHeight} = useWindowDimensions();
     const {top: safeAreaInsetsTop} = useSafeAreaInsets();
-    const {inputCallbackRef} = useAutoFocusInput();
+    const {inputCallbackRef, inputRef} = useAutoFocusInput();
 
     const {reason, backTo} = route.params;
     const {isOffline} = useNetwork({
@@ -134,7 +134,9 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe
                                 if (!el) {
                                     return;
                                 }
-                                updateMultilineInputRange(el);
+                                if (!inputRef.current) {
+                                    updateMultilineInputRange(el);
+                                }
                                 inputCallbackRef(el);
                             }}
                             containerStyles={[baseResponseInputContainerStyle]}

diff --git a/src/pages/tasks/NewTaskDescriptionPage.tsx b/src/pages/tasks/NewTaskDescriptionPage.tsx
@@ -37,7 +37,7 @@ type NewTaskDescriptionPageProps = NewTaskDescriptionPageOnyxProps & StackScreen
 function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {inputCallbackRef} = useAutoFocusInput();
+    const {inputCallbackRef, inputRef} = useAutoFocusInput();
 
     const onSubmit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_TASK_FORM>) => {
         TaskActions.setDescriptionValue(values.taskDescription);
@@ -83,8 +83,10 @@ function NewTaskDescriptionPage({task}: NewTaskDescriptionPageProps) {
                             accessibilityLabel={translate('newTaskPage.descriptionOptional')}
                             role={CONST.ROLE.PRESENTATION}
                             ref={(el) => {
+                                if (!inputRef.current) {
+                                    updateMultilineInputRange(el);
+                                }
                                 inputCallbackRef(el);
-                                updateMultilineInputRange(el);
                             }}
                             autoGrowHeight
                             maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}

diff --git a/src/pages/tasks/TaskDescriptionPage.tsx b/src/pages/tasks/TaskDescriptionPage.tsx
@@ -117,8 +117,10 @@ function TaskDescriptionPage({report, currentUserPersonalDetails}: TaskDescripti
                                 if (!element) {
                                     return;
                                 }
+                                if (!inputRef.current) {
+                                    updateMultilineInputRange(inputRef.current);
+                                }
                                 inputRef.current = element;
-                                updateMultilineInputRange(inputRef.current);
                             }}
                             autoGrowHeight
                             maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.tsx b/src/pages/workspace/WorkspaceInviteMessagePage.tsx
@@ -71,7 +71,7 @@ function WorkspaceInviteMessagePage({
 
     const [welcomeNote, setWelcomeNote] = useState<string>();
 
-    const {inputCallbackRef} = useAutoFocusInput();
+    const {inputCallbackRef, inputRef} = useAutoFocusInput();
 
     const welcomeNoteSubject = useMemo(
         () => `# ${currentUserPersonalDetails?.displayName ?? ''} invited you to ${policy?.name ?? 'a workspace'}`,
@@ -207,8 +207,10 @@ function WorkspaceInviteMessagePage({
                                 if (!element) {
                                     return;
                                 }
+                                if (!inputRef.current) {
+                                    updateMultilineInputRange(element);
+                                }
                                 inputCallbackRef(element);
-                                updateMultilineInputRange(element);
                             }}
                         />
                     </View>

diff --git a/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx b/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useRef, useState} from 'react';
 import {Keyboard, View} from 'react-native';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -26,6 +26,7 @@ type Props = WithPolicyProps;
 function WorkspaceProfileDescriptionPage({policy}: Props) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const isInputInitializedRef = useRef(false);
     const [description, setDescription] = useState(() =>
         Parser.htmlToMarkdown(
             // policy?.description can be an empty string
@@ -109,7 +110,10 @@ function WorkspaceProfileDescriptionPage({policy}: Props) {
                             autoGrowHeight
                             isMarkdownEnabled
                             ref={(el: BaseTextInputRef | null): void => {
-                                updateMultilineInputRange(el);
+                                if (!isInputInitializedRef.current) {
+                                    updateMultilineInputRange(el);
+                                }
+                                isInputInitializedRef.current = true;
                             }}
                         />
                     </View>