From 97499db7577871c987b2567f0b45927fa72f6441 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 11 Sep 2024 17:58:13 +0700 Subject: [PATCH 1/2] fix edit composer isn't focused --- .../index.android.ts | 26 ------------------- .../focusTextInputAfterAnimation/index.ts | 10 ------- .../focusTextInputAfterAnimation/types.ts | 5 ---- src/pages/home/report/ReportActionItem.tsx | 6 ++--- 4 files changed, 3 insertions(+), 44 deletions(-) delete mode 100644 src/libs/focusTextInputAfterAnimation/index.android.ts delete mode 100644 src/libs/focusTextInputAfterAnimation/index.ts delete mode 100644 src/libs/focusTextInputAfterAnimation/types.ts diff --git a/src/libs/focusTextInputAfterAnimation/index.android.ts b/src/libs/focusTextInputAfterAnimation/index.android.ts deleted file mode 100644 index cca8a6588103..000000000000 --- a/src/libs/focusTextInputAfterAnimation/index.android.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type FocusTextInputAfterAnimation from './types'; - -/** - * Initially this file is intended for native ios but use index.native.js filename and affects android. - * - * Initial comment for this file is: - * "Focus the text input with a slight delay to make sure modals are closed first. - * Since in react-native-modal `onModalHide` is called before the modal is actually hidden. - * It results in the keyboard being dismissed right away on both iOS and Android. - * See this discussion for more details: https://github.com/Expensify/App/issues/18300" - * - * But the bug already fixed, without using setTimeout for IOS the focus seems to work properly. - * Instead there is new IOS bug of text input content doesn't scroll to bottom if using setTimeout, - * also there is an android keyboard doesn't show up bug when text input is focused and - * the use of setTimeout will make the keyboard show up properly. - * - * @param animationLength you must use your best guess as to what a good animationLength is. It can't be too short, or the animation won't be finished. It can't be too long or - * the user will notice that it feels sluggish - */ -const focusTextInputAfterAnimation: FocusTextInputAfterAnimation = (inputRef, animationLength = 0) => { - setTimeout(() => { - inputRef?.focus(); - }, animationLength); -}; - -export default focusTextInputAfterAnimation; diff --git a/src/libs/focusTextInputAfterAnimation/index.ts b/src/libs/focusTextInputAfterAnimation/index.ts deleted file mode 100644 index 66d0c35c1a63..000000000000 --- a/src/libs/focusTextInputAfterAnimation/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type FocusTextInputAfterAnimation from './types'; - -/** - * This library is a no-op for all platforms except for Android and iOS and will immediately focus the given input without any delays. - */ -const focusTextInputAfterAnimation: FocusTextInputAfterAnimation = (inputRef) => { - inputRef?.focus(); -}; - -export default focusTextInputAfterAnimation; diff --git a/src/libs/focusTextInputAfterAnimation/types.ts b/src/libs/focusTextInputAfterAnimation/types.ts deleted file mode 100644 index ce5086328b33..000000000000 --- a/src/libs/focusTextInputAfterAnimation/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type {TextInput} from 'react-native'; - -type FocusTextInputAfterAnimation = (inputRef: TextInput | HTMLElement | undefined, animationLength: number) => void; - -export default FocusTextInputAfterAnimation; diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 98b626164146..045bdd634f5d 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -41,7 +41,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import ControlSelection from '@libs/ControlSelection'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as ErrorUtils from '@libs/ErrorUtils'; -import focusTextInputAfterAnimation from '@libs/focusTextInputAfterAnimation'; import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage'; import Navigation from '@libs/Navigation/Navigation'; import Permissions from '@libs/Permissions'; @@ -81,6 +80,7 @@ import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; import ReportActionItemSingle from './ReportActionItemSingle'; import ReportActionItemThread from './ReportActionItemThread'; import ReportAttachmentsContext from './ReportAttachmentsContext'; +import focusComposerWithDelay from '@libs/focusComposerWithDelay'; type ReportActionItemOnyxProps = { /** IOU report for this action, if any */ @@ -199,7 +199,7 @@ function ReportActionItem({ const [moderationDecision, setModerationDecision] = useState(CONST.MODERATION.MODERATOR_DECISION_APPROVED); const reactionListRef = useContext(ReactionListContext); const {updateHiddenAttachments} = useContext(ReportAttachmentsContext); - const textInputRef = useRef(); + const textInputRef = useRef(null); const popoverAnchorRef = useRef>(null); const downloadedPreviews = useRef([]); const prevDraftMessage = usePrevious(draftMessage); @@ -274,7 +274,7 @@ function ReportActionItem({ return; } - focusTextInputAfterAnimation(textInputRef.current, 100); + focusComposerWithDelay(textInputRef.current)(true); }, [prevDraftMessage, draftMessage]); useEffect(() => { From 3e2b7d69c57ee530898e499a199d86f6570da7ad Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 11 Sep 2024 18:01:16 +0700 Subject: [PATCH 2/2] prettier --- src/pages/home/report/ReportActionItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 045bdd634f5d..47265cdb57f6 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -41,6 +41,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import ControlSelection from '@libs/ControlSelection'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as ErrorUtils from '@libs/ErrorUtils'; +import focusComposerWithDelay from '@libs/focusComposerWithDelay'; import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage'; import Navigation from '@libs/Navigation/Navigation'; import Permissions from '@libs/Permissions'; @@ -80,7 +81,6 @@ import ReportActionItemMessageEdit from './ReportActionItemMessageEdit'; import ReportActionItemSingle from './ReportActionItemSingle'; import ReportActionItemThread from './ReportActionItemThread'; import ReportAttachmentsContext from './ReportAttachmentsContext'; -import focusComposerWithDelay from '@libs/focusComposerWithDelay'; type ReportActionItemOnyxProps = { /** IOU report for this action, if any */