[$500] The expense chat doesn't scroll to bottom when we create a distance request

[m-natarajan]

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: 1.4.57-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dukenv0307
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1711431374851699

Action Performed:

1. Go to a WS chat
2. Create a money request
3. Open the expense chat of the request
4. Send some messages or create other requests
5. Scroll to the top of the report
6. Create a distance request in this report
7. After creating this request, notice the report

Expected Result:

The report should be scrolled to the bottom as it's when we create other requests like manual or scan

Actual Result:

The report isn't scrolled to the bottom

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2024-03-26.at.12.36.28.mov

Recording.2917.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a3b77e7d3b5ad058
• Upwork Job ID: 1775261893332221952
• Last Price Increase: 2024-04-02
• Automatic offers:
• dukenv0307 | Reviewer | 0

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[nkdengineer]

Proposal

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

The report isn't scrolled to the bottom

What is the root cause of that problem?

When we create a new distance request, we always notifyNewAction for the chat report. So if we create this in expense report, this doesn't scroll to bottom

App/src/libs/actions/IOU.ts

Line 1417 in ad1e214

Report.notifyNewAction(chatReport.reportID, userAccountID);

Actually, sometime when we open the report, the report doesn't scroll to bottom when we send any action. The RCA of this we're missing scrollToBottomForCurrentUserAction as dependency of this useEffect

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

Line 364 in 94b9b33

}, [report.reportID]);

So if the time we open the report the last report action of the report isn't loaded, hasNewestReportAction is always false and then the report never scrolls to bottom.

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

Lines 321 to 330 in 94b9b33

	const scrollToBottomForCurrentUserAction = useCallback(
	(isFromCurrentUser: boolean) => {
	// If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where
	// they are now in the list.
	if (!isFromCurrentUser || !hasNewestReportAction) {
	return;
	}
	InteractionManager.runAfterInteractions(() => reportScrollManager.scrollToBottom());
	},
	[hasNewestReportAction, reportScrollManager],

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

1. We should do the same way as we do in requestMoney here to get the active report and then pass this to notifyNewAction function

App/src/libs/actions/IOU.ts

Line 2127 in ad1e214

const activeReportID = isMoneyRequestReport ? report.reportID : chatReport.reportID;

const activeReportID = isMoneyRequestReport ? report.reportID : chatReport.reportID; 
Report.notifyNewAction(activeReportID, userAccountID); 

App/src/libs/actions/IOU.ts

Line 1417 in ad1e214

Report.notifyNewAction(chatReport.reportID, userAccountID);

2. We should create a ref for hasNewestReportAction and use it in scrollToBottomForCurrentUserAction function

const hasNewestReportActionRef = useRef(hasNewestReportAction);
useEffect(() => {
    hasNewestReportActionRef.current = hasNewestReportAction;
}, [hasNewestReportAction])
const scrollToBottomForCurrentUserAction = useCallback(
    (isFromCurrentUser: boolean) => {
        // If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where
        // they are now in the list.
        if (!isFromCurrentUser || !hasNewestReportActionRef.current) {
            return;
        }
        InteractionManager.runAfterInteractions(() => reportScrollManager.scrollToBottom());
    },
    [reportScrollManager],
);

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

Line 321 in 94b9b33

const scrollToBottomForCurrentUserAction = useCallback(

What alternative solutions did you explore? (Optional)

NA

[dukenv0307]

@johncschuster I'm the reporter of this bug and have the context on this. I can take over this as C+ if the issue is external

[johncschuster]

@dukenv0307 thanks for reporting this and volunteering to be the reviewer! Is "scrolling to the bottom of the report" a global behavior when other requests are created?

[dukenv0307]

@johncschuster Yes, when we create other requests like manual or scan, the report scrolls to the bottom after the request is created.

Screen.Recording.2024-04-02.at.09.45.56.mov

[melvin-bot]

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