[HOLD for payment 2024-11-21] [$250] After hold and unhold expense page is not scrolling down to comments section

[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: 9.0.41-6
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/p1727724158339229

Action Performed:

1. Go to a workspace
2. Submit an expense
3. Go to the expense detail page and click on the header
4. Hold this expense
5. Unhold this expense

Expected Result:

After hold and unhold expense, it is scroll to bottom

Actual Result:

After hold and unhold expense, it isn't scrolling to the comment section

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

bug.1.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021841168390578719829
• Upwork Job ID: 1841168390578719829
• Last Price Increase: 2024-10-29
• Automatic offers:
• dukenv0307 | Reviewer | 104747445
• nkdengineer | Contributor | 104747448

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

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

[nkdengineer]

Edited by proposal-police: This proposal was edited at 2024-10-11 04:44:02 UTC.

Proposal

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

After hold and unhold expense is not scrolling down

What is the root cause of that problem?

After hold and unhold expense, we don't have any logic to scroll

App/src/libs/actions/IOU.ts

Line 7924 in 96d8973

'HoldRequest',

App/src/libs/actions/IOU.ts

Line 8025 in 96d8973

'UnHoldRequest',

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

We should use Report.notifyNewAction in 2 function unholdRequest and putOnHold to scroll to the bottom of this report like we did in other places

    API.write(
        'HoldRequest',
    ...
    );
    const report = ReportUtils.getReport(reportID);
    const parentReportAction = ReportActionsUtils.getReportAction(report?.parentReportID ?? '-1', report?.parentReportActionID ?? '-1');
    const currentReportID = ReportUtils.isOneTransactionThread(report?.reportID ?? '', report?.parentReportID ?? '', parentReportAction) ? report?.parentReportID : reportID ;
    
    Report.notifyNewAction(currentReportID, userAccountID);

    API.write(
        'UnHoldRequest',
    ...
    );
    const report = ReportUtils.getReport(reportID);
    const parentReportAction = ReportActionsUtils.getReportAction(report?.parentReportID ?? '-1', report?.parentReportActionID ?? '-1');
    const currentReportID = ReportUtils.isOneTransactionThread(report?.reportID ?? '', report?.parentReportID ?? '', parentReportAction) ? report?.parentReportID : reportID ;

    Report.notifyNewAction(currentReportID, userAccountID);

What alternative solutions did you explore? (Optional)

[dukenv0307]

@sakluger I report this bug so I can help take it as C+

[huult]

Proposal

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

After hold and unhold expense page is not scrolling down to comments section

What is the root cause of that problem?

We haven't handled scrolling to the bottom when HOLD or UNHOLD changes yet

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

We should check if sortedVisibleReportActions has changed to include HOLD or UNHOLD in order to determine if we need to scroll to the bottom. Something like this:

//.src/pages/home/report/ReportActionsList.tsx#L203
+const previousReport = useRef<OnyxTypes.ReportAction[]>([]);
+ useEffect(() => {
+        if (!previousReport.current && Array.isArray(sortedVisibleReportActions) && sortedVisibleReportActions.length) {
+            previousReport.current = sortedVisibleReportActions;
+            return;
+        }

+        if (Array.isArray(sortedVisibleReportActions) && sortedVisibleReportActions.length) {
+            const previousActions = previousReport.current || [];

+            const newActions = sortedVisibleReportActions.filter((newAction) => !previousActions.some((prevAction) => +prevAction.reportActionID === newAction.reportActionID));
+            const containsHoldOrUnhold = newActions.some((action) => action?.actionName === 'HOLD' || action?.actionName + === 'UNHOLD');

+            if (containsHoldOrUnhold) {
+                InteractionManager.runAfterInteractions(() => {
+                    requestAnimationFrame(() => {
+                        reportScrollManager.scrollToBottom();
+                    });
+                });
+            }

+            previousReport.current = sortedVisibleReportActions;
+        }
+    }, [reportScrollManager, sortedVisibleReportActions]);

Details

POC

Screen.Recording.2024-10-01.at.11.59.24.mov

[melvin-bot]

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

[melvin-bot]

Current assignee @dukenv0307 is eligible for the External assigner, not assigning anyone new.

[sakluger]

Thanks @dukenv0307!

[raza-ak]

Proposal

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

After hold and unhold expense page is not scrolling down to comments section

What is the root cause of that problem?

The "ReportActionsList.tsx" component does not currently handle auto-scrolling when new messages or comments are added. As a result, the page does not scroll to the latest comment when an expense is held or unheld.

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

We will update the "ReportActionsList.tsx" component to detect when a new message arrives and implement automatic scrolling to the latest comment whenever an expense is held or unheld. This will ensure that the page always scrolls down to display the newest message.

Video:

372422564-47842cb7-2be7-4562-bd9d-3b2cac706e1d.mp4