From f09e869560094ff59001e4194820743cb492fe46 Mon Sep 17 00:00:00 2001 From: Tsaqif Date: Thu, 8 Feb 2024 22:51:28 +0700 Subject: [PATCH] Fix focus is in edit report action after ctrl+k when delete confirm modal appears Signed-off-by: Tsaqif --- src/libs/focusEditAfterCancelDelete/index.native.ts | 8 ++++++++ src/libs/focusEditAfterCancelDelete/index.ts | 5 +++++ src/libs/focusEditAfterCancelDelete/types.ts | 5 +++++ .../home/report/ReportActionItemMessageEdit.tsx | 12 +++--------- 4 files changed, 21 insertions(+), 9 deletions(-) create mode 100755 src/libs/focusEditAfterCancelDelete/index.native.ts create mode 100755 src/libs/focusEditAfterCancelDelete/index.ts create mode 100755 src/libs/focusEditAfterCancelDelete/types.ts diff --git a/src/libs/focusEditAfterCancelDelete/index.native.ts b/src/libs/focusEditAfterCancelDelete/index.native.ts new file mode 100755 index 000000000000..17bafabc5790 --- /dev/null +++ b/src/libs/focusEditAfterCancelDelete/index.native.ts @@ -0,0 +1,8 @@ +import {InteractionManager} from 'react-native'; +import type FocusEditAfterCancelDelete from './types'; + +const focusEditAfterCancelDelete: FocusEditAfterCancelDelete = (textInputRef) => { + InteractionManager.runAfterInteractions(() => textInputRef?.focus()); +}; + +export default focusEditAfterCancelDelete; diff --git a/src/libs/focusEditAfterCancelDelete/index.ts b/src/libs/focusEditAfterCancelDelete/index.ts new file mode 100755 index 000000000000..541c0ef1aaef --- /dev/null +++ b/src/libs/focusEditAfterCancelDelete/index.ts @@ -0,0 +1,5 @@ +import type FocusEditAfterCancelDelete from './types'; + +const focusEditAfterCancelDelete: FocusEditAfterCancelDelete = () => {}; + +export default focusEditAfterCancelDelete; diff --git a/src/libs/focusEditAfterCancelDelete/types.ts b/src/libs/focusEditAfterCancelDelete/types.ts new file mode 100755 index 000000000000..ee479203f890 --- /dev/null +++ b/src/libs/focusEditAfterCancelDelete/types.ts @@ -0,0 +1,5 @@ +import type {TextInput} from 'react-native'; + +type FocusEditAfterCancelDelete = (inputRef: TextInput | HTMLTextAreaElement | null) => void; + +export default FocusEditAfterCancelDelete; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index e97aa0338f90..427c6ccdbfc4 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -3,7 +3,7 @@ import Str from 'expensify-common/lib/str'; import lodashDebounce from 'lodash/debounce'; import type {ForwardedRef} from 'react'; import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {InteractionManager, Keyboard, View} from 'react-native'; +import {Keyboard, View} from 'react-native'; import type {NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputKeyPressEventData} from 'react-native'; import type {Emoji} from '@assets/emojis/types'; import Composer from '@components/Composer'; @@ -25,6 +25,7 @@ import * as Browser from '@libs/Browser'; import * as ComposerUtils from '@libs/ComposerUtils'; import * as EmojiUtils from '@libs/EmojiUtils'; import focusComposerWithDelay from '@libs/focusComposerWithDelay'; +import focusEditAfterCancelDelete from '@libs/focusEditAfterCancelDelete'; import onyxSubscribe from '@libs/onyxSubscribe'; import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager'; import * as ReportActionsUtils from '@libs/ReportActionsUtils'; @@ -317,14 +318,7 @@ function ReportActionItemMessageEdit( // When user tries to save the empty message, it will delete it. Prompt the user to confirm deleting. if (!trimmedNewDraft) { textInputRef.current?.blur(); - ReportActionContextMenu.showDeleteModal( - reportID, - action, - true, - deleteDraft, - // eslint-disable-next-line @typescript-eslint/no-misused-promises - () => InteractionManager.runAfterInteractions(() => textInputRef.current?.focus()), - ); + ReportActionContextMenu.showDeleteModal(reportID, action, true, deleteDraft, () => focusEditAfterCancelDelete(textInputRef.current)); return; } Report.editReportComment(reportID, action, trimmedNewDraft);