From 92819fa89a10bae638eb09b7627bd4051060c192 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 7 Aug 2025 16:43:42 +0700 Subject: [PATCH 1/3] Composer - Keyboard overlaps the composer after selecting emoji --- .../MoneyRequestReportActionsList.tsx | 1 + .../useReportScrollManager/index.native.ts | 6 ++-- src/hooks/useReportScrollManager/index.ts | 4 +-- src/hooks/useReportScrollManager/types.ts | 2 +- .../home/report/PureReportActionItem.tsx | 5 ++++ .../report/ReportActionItemMessageEdit.tsx | 30 +++++++++++++++---- .../report/ReportActionItemParentAction.tsx | 5 ++++ .../report/ReportActionsListItemRenderer.tsx | 6 ++++ 8 files changed, 47 insertions(+), 12 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index a151a87fa861..ee6cd93d99e3 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -537,6 +537,7 @@ function MoneyRequestReportActionsList({ userBillingFundID={userBillingFundID} emojiReactions={actionEmojiReactions} draftMessage={matchingDraftMessageString} + isReverted={false} /> ); }, diff --git a/src/hooks/useReportScrollManager/index.native.ts b/src/hooks/useReportScrollManager/index.native.ts index fa0042a3bf26..12880b096658 100644 --- a/src/hooks/useReportScrollManager/index.native.ts +++ b/src/hooks/useReportScrollManager/index.native.ts @@ -11,12 +11,12 @@ function useReportScrollManager(): ReportScrollManagerData { * Scroll to the provided index. */ const scrollToIndex = useCallback( - (index: number) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + (index: number, isEditing?: boolean, viewPosition?: number) => { if (!flatListRef?.current) { return; } - - flatListRef.current.scrollToIndex({index}); + flatListRef.current.scrollToIndex({index, viewPosition}); }, [flatListRef], ); diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts index e5e95b77bbe8..f0ba5513dd51 100644 --- a/src/hooks/useReportScrollManager/index.ts +++ b/src/hooks/useReportScrollManager/index.ts @@ -9,12 +9,12 @@ function useReportScrollManager(): ReportScrollManagerData { * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because */ const scrollToIndex = useCallback( - (index: number, isEditing?: boolean) => { + (index: number, isEditing?: boolean, viewPosition?: number) => { if (!flatListRef?.current || isEditing) { return; } - flatListRef.current.scrollToIndex({index, animated: true}); + flatListRef.current.scrollToIndex({index, animated: true, viewPosition}); }, [flatListRef], ); diff --git a/src/hooks/useReportScrollManager/types.ts b/src/hooks/useReportScrollManager/types.ts index 6706f00e1744..3c8fa759df24 100644 --- a/src/hooks/useReportScrollManager/types.ts +++ b/src/hooks/useReportScrollManager/types.ts @@ -2,7 +2,7 @@ import type {FlatListRefType} from '@pages/home/ReportScreenContext'; type ReportScrollManagerData = { ref: FlatListRefType; - scrollToIndex: (index: number, isEditing?: boolean) => void; + scrollToIndex: (index: number, isEditing?: boolean, viewPosition?: number) => void; scrollToBottom: () => void; scrollToEnd: () => void; scrollToOffset: (offset: number) => void; diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 68b59b2376fc..593beedaa1b6 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -365,6 +365,9 @@ type PureReportActionItemProps = { /** Current user's account id */ currentUserAccountID?: number; + + /** Whether the flatlist is reverted */ + isReverted?: boolean; }; // This is equivalent to returning a negative boolean in normal functions, but we can keep the element return type @@ -430,6 +433,7 @@ function PureReportActionItem({ shouldShowBorder, shouldHighlight = false, currentUserAccountID, + isReverted, }: PureReportActionItemProps) { const actionSheetAwareScrollViewContext = useContext(ActionSheetAwareScrollView.ActionSheetAwareScrollViewContext); const {translate, datetimeToCalendarTime, formatPhoneNumber, localeCompare} = useLocalize(); @@ -1299,6 +1303,7 @@ function PureReportActionItem({ (chatIncludesConcierge(report) && isBlockedFromConcierge(blockedFromConcierge)) || isArchivedNonExpenseReport(report, isArchivedRoom) } isGroupPolicyReport={!!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE} + isReverted={isReverted} /> )} diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index e458828fe186..e998ae0fe4a5 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -74,6 +74,9 @@ type ReportActionItemMessageEditProps = { /** Whether report is from group policy */ isGroupPolicyReport: boolean; + + /** Whether the flatlist is reverted */ + isReverted?: boolean; }; const shouldUseForcedSelectionRange = shouldUseEmojiPickerSelection(); @@ -87,7 +90,7 @@ const DEFAULT_MODAL_VALUE = { }; function ReportActionItemMessageEdit( - {action, draftMessage, reportID, policyID, index, isGroupPolicyReport, shouldDisableEmojiPicker = false}: ReportActionItemMessageEditProps, + {action, draftMessage, reportID, policyID, index, isGroupPolicyReport, shouldDisableEmojiPicker = false, isReverted = true}: ReportActionItemMessageEditProps, forwardedRef: ForwardedRef, ) { const [preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {canBeMissing: true}); @@ -378,6 +381,25 @@ function ReportActionItemMessageEdit( [cursorPositionValue, measureContainer, selection], ); + const scrollToIndex = useCallback( + (index: number, isEditing?: boolean, viewPosition?: number, shouldDelay = false) => { + if (shouldDelay) { + setTimeout(() => { + requestAnimationFrame(() => { + reportScrollManager.scrollToIndex(index, isEditing, viewPosition); + }); + }, 400); + } else { + InteractionManager.runAfterInteractions(() => { + requestAnimationFrame(() => { + reportScrollManager.scrollToIndex(index, isEditing, viewPosition); + }); + }); + } + }, + [reportScrollManager], + ); + useEffect(() => { // We use the tag to store the native ID of the text input. Later, we use it in onSelectionChange to pick up the proper text input data. tag.set(findNodeHandle(textInputRef.current) ?? -1); @@ -470,11 +492,7 @@ function ReportActionItemMessageEdit( if (textInputRef.current) { ReportActionComposeFocusManager.editComposerRef.current = textInputRef.current; } - InteractionManager.runAfterInteractions(() => { - requestAnimationFrame(() => { - reportScrollManager.scrollToIndex(index, true); - }); - }); + scrollToIndex(index, true, isReverted ? 0 : 1, !isReverted); if (isMobileChrome() && reportScrollManager.ref?.current) { reportScrollManager.ref.current.scrollToIndex({index, animated: false}); } diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 1b8874cfa343..b0913d5f50ac 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -85,6 +85,9 @@ type ReportActionItemParentActionProps = { /** User billing fund ID */ userBillingFundID: number | undefined; + + /** Whether the flatlist is reverted */ + isReverted?: boolean; }; function ReportActionItemParentAction({ @@ -106,6 +109,7 @@ function ReportActionItemParentAction({ allEmojiReactions, linkedTransactionRouteError, userBillingFundID, + isReverted, }: ReportActionItemParentActionProps) { const styles = useThemeStyles(); const ancestorIDs = useRef(getAllAncestorReportActionIDs(report)); @@ -221,6 +225,7 @@ function ReportActionItemParentAction({ emojiReactions={actionEmojiReactions} linkedTransactionRouteError={linkedTransactionRouteError} userBillingFundID={userBillingFundID} + isReverted={isReverted} /> ); diff --git a/src/pages/home/report/ReportActionsListItemRenderer.tsx b/src/pages/home/report/ReportActionsListItemRenderer.tsx index d05f1e98dea3..b60772f638ad 100644 --- a/src/pages/home/report/ReportActionsListItemRenderer.tsx +++ b/src/pages/home/report/ReportActionsListItemRenderer.tsx @@ -92,6 +92,9 @@ type ReportActionsListItemRendererProps = { /** All emoji reactions collection */ allEmojiReactions?: OnyxCollection; + + /** Whether the flatlist is reverted */ + isReverted?: boolean; }; function ReportActionsListItemRenderer({ @@ -123,6 +126,7 @@ function ReportActionsListItemRenderer({ personalDetails, allDraftMessages, allEmojiReactions, + isReverted, }: ReportActionsListItemRendererProps) { const originalMessage = useMemo(() => getOriginalMessage(reportAction), [reportAction]); @@ -219,6 +223,7 @@ function ReportActionsListItemRenderer({ allEmojiReactions={allEmojiReactions} linkedTransactionRouteError={linkedTransactionRouteError} userBillingFundID={userBillingFundID} + isReverted={isReverted} /> ); } @@ -250,6 +255,7 @@ function ReportActionsListItemRenderer({ emojiReactions={emojiReactions} linkedTransactionRouteError={linkedTransactionRouteError} userBillingFundID={userBillingFundID} + isReverted={isReverted} /> ); } From 7510405e590b38c925a983c3ecc425a8faf94b56 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 5 Sep 2025 10:38:27 +0700 Subject: [PATCH 2/3] fix conflicts --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 6 +++--- src/pages/home/report/ReportActionItemParentAction.tsx | 6 ------ src/pages/home/report/ReportActionsListItemRenderer.tsx | 9 --------- 3 files changed, 3 insertions(+), 18 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index ae8fd34f3acd..cccb51597748 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -395,17 +395,17 @@ function ReportActionItemMessageEdit( ); const scrollToIndex = useCallback( - (index: number, isEditing?: boolean, viewPosition?: number, shouldDelay = false) => { + (i: number, isEditing?: boolean, viewPosition?: number, shouldDelay = false) => { if (shouldDelay) { setTimeout(() => { requestAnimationFrame(() => { - reportScrollManager.scrollToIndex(index, isEditing, viewPosition); + reportScrollManager.scrollToIndex(i, isEditing, viewPosition); }); }, 400); } else { InteractionManager.runAfterInteractions(() => { requestAnimationFrame(() => { - reportScrollManager.scrollToIndex(index, isEditing, viewPosition); + reportScrollManager.scrollToIndex(i, isEditing, viewPosition); }); }); } diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index efa8b5ec79ec..6fac197b4807 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -86,16 +86,13 @@ type ReportActionItemParentActionProps = { /** User billing fund ID */ userBillingFundID: number | undefined; -<<<<<<< HEAD /** Whether the flatlist is reverted */ isReverted?: boolean; -======= /** Did the user dismiss trying out NewDot? If true, it means they prefer using OldDot */ isTryNewDotNVPDismissed: boolean | undefined; /** Whether the report is archived */ isReportArchived: boolean; ->>>>>>> main }; function ReportActionItemParentAction({ @@ -117,12 +114,9 @@ function ReportActionItemParentAction({ allEmojiReactions, linkedTransactionRouteError, userBillingFundID, -<<<<<<< HEAD isReverted, -======= isTryNewDotNVPDismissed = false, isReportArchived = false, ->>>>>>> main }: ReportActionItemParentActionProps) { const styles = useThemeStyles(); const ancestorIDs = useRef(getAllAncestorReportActionIDs(report)); diff --git a/src/pages/home/report/ReportActionsListItemRenderer.tsx b/src/pages/home/report/ReportActionsListItemRenderer.tsx index 7fbf9f9094c4..3851e8741c3c 100644 --- a/src/pages/home/report/ReportActionsListItemRenderer.tsx +++ b/src/pages/home/report/ReportActionsListItemRenderer.tsx @@ -93,15 +93,12 @@ type ReportActionsListItemRendererProps = { /** All emoji reactions collection */ allEmojiReactions?: OnyxCollection; -<<<<<<< HEAD /** Whether the flatlist is reverted */ isReverted?: boolean; -======= /** Did the user dismiss trying out NewDot? If true, it means they prefer using OldDot */ isTryNewDotNVPDismissed: boolean | undefined; /** Whether the report is archived */ isReportArchived: boolean; ->>>>>>> main }; function ReportActionsListItemRenderer({ @@ -133,12 +130,9 @@ function ReportActionsListItemRenderer({ personalDetails, allDraftMessages, allEmojiReactions, -<<<<<<< HEAD isReverted, -======= isTryNewDotNVPDismissed = false, isReportArchived = false, ->>>>>>> main }: ReportActionsListItemRendererProps) { const originalMessage = useMemo(() => getOriginalMessage(reportAction), [reportAction]); @@ -235,12 +229,9 @@ function ReportActionsListItemRenderer({ allEmojiReactions={allEmojiReactions} linkedTransactionRouteError={linkedTransactionRouteError} userBillingFundID={userBillingFundID} -<<<<<<< HEAD isReverted={isReverted} -======= isTryNewDotNVPDismissed={isTryNewDotNVPDismissed} isReportArchived={isReportArchived} ->>>>>>> main /> ); } From 38db00ff37fc137a9083901ceea54dacd23099a6 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 7 Oct 2025 00:04:39 +0700 Subject: [PATCH 3/3] prettier --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 0cf8b9ef66b1..a4234e1dda63 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -84,7 +84,7 @@ type ReportActionItemMessageEditProps = { /** Whether the flatlist is reverted */ isReverted?: boolean; - + /** Reference to the outer element */ ref?: ForwardedRef; };