[Due for payment 2025-09-30] [$250] Expense - Last message behind the keypad after auto scrolling

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.99-5
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #68692
Email or phone of affected tester (no customers): agexptest+pr2608d@gmail.com
Issue reported by: Applause Internal Team
Device used: Samsung S23FE/ Android 15
App Component: Money Requests

Action Performed:

1. Launch the Expensify app
2. Log in with a Gmail account
3. Open 1:1 DM
4. Create an expense with any details
5. Go to the expense details
6. Create another expense in the expense thread
7. In the expense report, send many messages (enough for the scroll bar to appear)
8. Scroll to the top of the expense report
9. Send another message

Expected Result:

The screen is automatically scrolling to the bottom.

Actual Result:

The screen is automatically scrolling to the bottom, but the last message is displayed behind the keypad.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021961460441191564275
• Upwork Job ID: 1961460441191564275
• Last Price Increase: 2025-08-29

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-09-05 02:32:47 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Expense - Last message behind the keypad after auto scrolling

What is the root cause of that problem?

The issue is caused by this PR #66852 which changed the scroll behavior for expense reports and transaction threads:
Before: Always used scrollToBottom() which scrolls to offset 0 (bottom of inverted FlatList)
After: Uses scrollToEnd() when hasNewestReportAction && !unreadMarkerReportActionID

Why it happen?

scrollToEnd() doesn't account for keyboard height, causing messages to appear behind the keyboard

App/src/pages/home/report/ReportActionsList.tsx

Lines 719 to 722 in 79de25f

	if (shouldScrollToEndAfterLayout) {
	reportScrollManager.scrollToEnd();
	setShouldScrollToEndAfterLayout(false);
	}

What changes do you think we should make in order to solve the problem?

We should use scrollToBottom() when the keyboard is visible, since it properly accounts for the keyboard and scrolls to the absolute bottom

           const {isKeyboardShown} = useKeyboardState();

            ...
// The easiest solution is 

if (isKeyboardShown) {
reportScrollManager.scrollToBottom();
} else {
reportScrollManager.scrollToEnd();
}

// Or if we want to check if specificly

if (shouldScrollToEndAfterLayout) {
    // For expense reports and transaction threads, always use scrollToBottom
    // when keyboard is visible to prevent messages from appearing behind keyboard
    if ((isExpenseReport(report) || isTransactionThread(parentReportAction)) && isKeyboardShown) {
        reportScrollManager.scrollToBottom();
    } else {
        reportScrollManager.scrollToEnd();
    }
    setShouldScrollToEndAfterLayout(false);
}

// Or 

if (shouldScrollToEndAfterLayout) {
    // Always use scrollToBottom for expense reports and transaction threads
    // as it properly handles keyboard height
    if (isExpenseReport(report) || isTransactionThread(parentReportAction)) {
        reportScrollManager.scrollToBottom();
    } else {
        reportScrollManager.scrollToEnd();
    }
    setShouldScrollToEndAfterLayout(false);
}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Or Can replace to use reportScrollManager.scrollToBottom()

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[thelullabyy]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The screen is automatically scrolling to the bottom, but the last message is displayed behind the keypad.

What is the root cause of that problem?

We're subscribing action event here when new message is sent

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Line 498 in 5f6e6ee

const unsubscribe = subscribeToNewActionEvent(report.reportID, scrollToBottomForCurrentUserAction);

This is trigger almost immediately when we send message so scrollToBottomForCurrentUserAction run before new message is rendered and scrollToEnd with current layout without new message. That's why the last message is not seen

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 487 to 489 in 5f6e6ee

	setTimeout(() => {
	reportScrollManager.scrollToEnd();
	}, DELAY_FOR_SCROLLING_TO_END);

What changes do you think we should make in order to solve the problem?

Add this logic to check when scrollToBottomForCurrentUserAction is triggered, does visibleReportActions include new reportAction. If not mark it and scrollToEnd when last reportAction is rendered

const [enableScrollToEnd, setEnableScrollToEnd] = useState<boolean>(false);
const [lastActionEventId, setLastActionEventId] = useState<string>('');
....
const index = visibleReportActions.findIndex((item) => item.reportActionID === reportAction?.reportActionID);
if(index != -1) {
   setTimeout(() => {
       reportScrollManager.scrollToEnd();
     }, DELAY_FOR_SCROLLING_TO_END);
 } else {
     setEnableScrollToEnd(true);
     setLastActionEventId(reportAction?.reportActionID);
}

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 485 to 488 in 5f6e6ee

	// We want to scroll to the end of the list where the newest message is
	// however scrollToEnd will not work correctly with items of variable sizes without `getItemLayout` - so we need to delay the scroll until every item rendered
	setTimeout(() => {
	reportScrollManager.scrollToEnd();

useEffect(() => {
        const index = visibleReportActions.findIndex((item) => item.reportActionID === lastActionEventId);
        if(enableScrollToEnd && index != -1) {
            setTimeout(() => {
                reportScrollManager.scrollToEnd();
            }, DELAY_FOR_SCROLLING_TO_END);
            setEnableScrollToEnd(false);
        }
    }, [visibleReportActions, lastActionEventId, enableScrollToEnd]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[huult]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Last message behind the keypad after auto scrolling

What is the root cause of that problem?

Scroll to bottom is triggered too early (DELAY_FOR_SCROLLING_TO_END time not enough), before the new item is rendered in the list. This means the scroll position is calculated without the new message, causing the UI to scroll to the bottom of the old list while the new message gets hidden behind the keyboard

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 487 to 489 in 79de25f

	setTimeout(() => {
	reportScrollManager.scrollToEnd();
	}, DELAY_FOR_SCROLLING_TO_END);

What changes do you think we should make in order to solve the problem?

To resolve this issue, we should call scrollToBottom after the new message is rendered

Increase the timeout to 400ms

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 487 to 489 in 79de25f

	setTimeout(() => {
	reportScrollManager.scrollToEnd();
	}, DELAY_FOR_SCROLLING_TO_END);

update to:

  setTimeout(() => {
      reportScrollManager.scrollToEnd();
  }, 400);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

none

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Solution 2: Move the scroll logic to a useEffect that runs after the new message is rendered in the list:

App/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Lines 476 to 493 in 79de25f

	const scrollToBottomForCurrentUserAction = useCallback(
	(isFromCurrentUser: boolean, reportAction?: OnyxTypes.ReportAction) => {
	InteractionManager.runAfterInteractions(() => {
	setIsFloatingMessageCounterVisible(false);
	// If a new comment is added from the current user, scroll to the bottom, otherwise leave the user position unchanged
	if (!isFromCurrentUser || reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT) {
	return;
	}
	// We want to scroll to the end of the list where the newest message is
	// however scrollToEnd will not work correctly with items of variable sizes without `getItemLayout` - so we need to delay the scroll until every item rendered
	setTimeout(() => {
	reportScrollManager.scrollToEnd();
	}, DELAY_FOR_SCROLLING_TO_END);
	});
	},
	[reportScrollManager, setIsFloatingMessageCounterVisible],
	);

update to:

const lastRenderedActionID = useRef<string | undefined>(undefined);

useEffect(() => {
    const lastVisibleAction = visibleReportActions.at(-1);
    if (
        lastVisibleAction &&
        lastVisibleAction.reportActionID !== lastRenderedActionID.current &&
        lastVisibleAction.actorAccountID === currentUserAccountID &&
        lastVisibleAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT
    ) {
        setIsFloatingMessageCounterVisible(false);
        setTimeout(() => {
            reportScrollManager.scrollToEnd();
        }, DELAY_FOR_SCROLLING_TO_END);
    }
    lastRenderedActionID.current = lastVisibleAction?.reportActionID;
}, [visibleReportActions, currentUserAccountID, reportScrollManager, setIsFloatingMessageCounterVisible]);

Screen.Recording.2025-08-29.at.14.58.41.mov

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021961460441191564275

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @akinwale (External)

[zanyrenney]

Already have a bunch of proposals here - @akinwale please can you review them and let me know which to progress with? Thanks!

[zanyrenney]

Bump @akinwale please can you prioritise the reviews of the proposals we have above? Thanks!