[Due for payment 2025-08-13] [$250] Improve navigation behavior when opening expenses from reports

[davidcardoza]

- Slack conversation for reference

Problem

When a user clicks on an expense or the "Review" button from the Reports view, they are taken to the bottom of the expense thread. This forces them to scroll up manually to address violations (e.g., editing the expense category). This disrupts the user workflow and adds unnecessary friction, especially when multiple edits are needed.

Why is this important?

This behavior creates confusion and inefficiency. Users expect to land at the top of the expense thread—where violations and key information are displayed—so they can resolve issues directly. This inconsistency between navigating to expenses vs. chats (Inbox vs. Reports) undermines user expectations. The team is aligned on the UX improvement and sees it as a quality-of-life fix.

Solution

• Update the navigation logic so that clicking an expense or "Review" from the Reports view loads the top of the expense thread.

Issue Owner

Current Issue Owner: @truph01

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021960787284046922546
• Upwork Job ID: 1960787284046922546
• Last Price Increase: 2025-08-27

[melvin-bot]

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

[thelullabyy]

Proposal

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

Improve navigation behavior when opening expenses from reports

What is the root cause of that problem?

The report action list is always scrolled to bottom when we open the report.

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

Lines 383 to 392 in 04a715b

	useEffect(() => {
	if (linkedReportActionID) {
	return;
	}
	InteractionManager.runAfterInteractions(() => {
	setIsFloatingMessageCounterVisible(false);
	reportScrollManager.scrollToBottom();
	});
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

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

We can check if the report is a transaction thread report or one expense report and this report is RHP report, we scroll to top to see the MoneyRequestView

const isTransactionThreadReport = isMoneyRequestAction(parentReportAction) || !!transactionThreadReport;
useEffect(() => {
    if (linkedReportActionID) {
        return;
    }
    InteractionManager.runAfterInteractions(() => {
        setIsFloatingMessageCounterVisible(false);
        if (isTransactionThreadReport && isSearchTopmostFullScreenRoute()) {
            reportScrollManager.scrollToIndex(sortedVisibleReportActions.length - 1);
        } else {
            reportScrollManager.scrollToBottom();
        }
    });
    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, []);

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

Lines 383 to 392 in 04a715b

	useEffect(() => {
	if (linkedReportActionID) {
	return;
	}
	InteractionManager.runAfterInteractions(() => {
	setIsFloatingMessageCounterVisible(false);
	reportScrollManager.scrollToBottom();
	});
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

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)

NA

Result

Screen.Recording.2025-06-12.at.12.14.08.mov

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.

[danielrvidal]

@fedirjh thoughts on the proposal?

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (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.