From aab255c5d159944cc50481303c04e41989b539a1 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 25 Jul 2024 17:03:46 +0800 Subject: [PATCH 1/3] expose the input ref --- src/hooks/useAutoFocusInput.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/hooks/useAutoFocusInput.ts b/src/hooks/useAutoFocusInput.ts index 2e2d9a086ab1..d4ccb44440b9 100644 --- a/src/hooks/useAutoFocusInput.ts +++ b/src/hooks/useAutoFocusInput.ts @@ -1,5 +1,5 @@ import {useFocusEffect} from '@react-navigation/native'; -import {useCallback, useContext, useEffect, useRef, useState} from 'react'; +import {RefObject, useCallback, useContext, useEffect, useRef, useState} from 'react'; import type {TextInput} from 'react-native'; import {InteractionManager} from 'react-native'; import CONST from '@src/CONST'; @@ -7,6 +7,7 @@ import * as Expensify from '@src/Expensify'; type UseAutoFocusInput = { inputCallbackRef: (ref: TextInput | null) => void; + inputRef: RefObject; }; export default function useAutoFocusInput(): UseAutoFocusInput { @@ -55,5 +56,5 @@ export default function useAutoFocusInput(): UseAutoFocusInput { setIsInputInitialized(true); }; - return {inputCallbackRef}; + return {inputCallbackRef, inputRef}; } From 5c6d2dd487aa8e1d25ec55ee6f64bdf7961c52ca Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 25 Jul 2024 17:04:23 +0800 Subject: [PATCH 2/3] only call updateMultilineInputRange once --- src/pages/PrivateNotes/PrivateNotesEditPage.tsx | 4 +++- src/pages/RoomDescriptionPage.tsx | 4 +++- src/pages/iou/request/step/IOURequestStepDescription.tsx | 4 +++- src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx | 6 ++++-- src/pages/tasks/NewTaskDescriptionPage.tsx | 6 ++++-- src/pages/tasks/TaskDescriptionPage.tsx | 4 +++- src/pages/workspace/WorkspaceInviteMessagePage.tsx | 6 ++++-- src/pages/workspace/WorkspaceProfileDescriptionPage.tsx | 8 ++++++-- 8 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index 8ee260065b63..1779fe8e085e 100644 --- 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 index 1d64ca9e1129..1103b0ba3d8a 100644 --- 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 index 081f0b104355..7505b88d0745 100644 --- 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 index 64e8159334d9..b523d8102b50 100644 --- 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 index f5aaf9ea8ffd..f18829e8c803 100644 --- 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) => { 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 index 92f5b2394308..3dbece00fa20 100644 --- a/src/pages/tasks/TaskDescriptionPage.tsx +++ b/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} diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.tsx b/src/pages/workspace/WorkspaceInviteMessagePage.tsx index ff6fd22b7565..df34875f5fa6 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.tsx +++ b/src/pages/workspace/WorkspaceInviteMessagePage.tsx @@ -71,7 +71,7 @@ function WorkspaceInviteMessagePage({ const [welcomeNote, setWelcomeNote] = useState(); - 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); }} /> diff --git a/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx b/src/pages/workspace/WorkspaceProfileDescriptionPage.tsx index 527fdf28f8d1..09c4dce72e51 100644 --- 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; }} /> From b67d261250bb3963805f2ac2689ca0a955be4c5a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 25 Jul 2024 17:20:46 +0800 Subject: [PATCH 3/3] lint --- src/hooks/useAutoFocusInput.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/hooks/useAutoFocusInput.ts b/src/hooks/useAutoFocusInput.ts index d4ccb44440b9..26f045ebd579 100644 --- a/src/hooks/useAutoFocusInput.ts +++ b/src/hooks/useAutoFocusInput.ts @@ -1,5 +1,6 @@ import {useFocusEffect} from '@react-navigation/native'; -import {RefObject, useCallback, useContext, useEffect, useRef, useState} from 'react'; +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';