Fix can't close keyboard in some pages

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};
 }

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
  />

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}

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}

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]}

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}

src/pages/tasks/TaskDescriptionPage.tsx

@@ -116,8 +116,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}

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>

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>