[Ready for payment 11th Dec][$250] Expense - Next button on amount page reopens amount page instead of confirm page

[lanitochka17]

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.2.48-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1893/folder/13176730/42202301/1005354121
Email or phone of affected tester (no customers): niushdsiushbiusdh@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Create two empty reports
4. Click + > Create expense > Manual
5. Enter amount > Next
6. On confirm page, click Report field
7. Select another report
8. On confirm page, click RHP back button
9. On initial page, click Next button

Expected Result:

Confirm page will open

Actual Result:

After selecting different report on confirm page and returning to initial page, Next button reopens initial page

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6999660_1762793314617.7.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021988018208667950378
• Upwork Job ID: 1988018208667950378
• Last Price Increase: 2025-12-01
• Automatic offers:
• QichenZhu | Reviewer | 109667989
• tsa321 | Contributor | 109667991

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

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

[abbasifaizan70]

Proposal

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

When creating a manual expense, if a user changes the report on the confirmation page and then navigates back to the amount page using the RHP back button, clicking Next creates the expense with the original report instead of the newly selected report.

What is the root cause of that problem?

The navigateToConfirmationPage function in IOURequestStepAmount uses the reportID from route params when navigating to the confirmation page. When the user changes the report on the confirmation page, the transaction's reportID is updated in Onyx, but the route params remain unchanged. When navigating back and clicking Next again, the stale reportID from route params is used instead of the updated one stored in the transaction.

https://github.com/Expensify/App/blob/283ada6e8ad240d79ef2e3db4bb2de5c98caf85a/src/pages/iou/request/step/IOURequestStepAmount.tsx#L160-L171

The issue is that reportID comes from route params, not the updated transaction object.

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

Check if the transaction's reportID differs from the route params reportID. If it does, use the transaction's value instead.

Code Changes

File: src/pages/iou/request/step/IOURequestStepAmount.tsx

Diff:

 const navigateToConfirmationPage = () => {
+    // Use transaction's reportID if it exists and differs from route params
+    const reportIDToUse = transaction?.reportID && transaction.reportID !== reportID ? transaction.reportID : reportID;
     switch (iouType) {
         case CONST.IOU.TYPE.REQUEST:
-            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.SUBMIT, transactionID, reportID, backToReport));
+            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.SUBMIT, transactionID, reportIDToUse, backToReport));
             break;
         case CONST.IOU.TYPE.SEND:
-            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.PAY, transactionID, reportID));
+            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, CONST.IOU.TYPE.PAY, transactionID, reportIDToUse));
             break;
         default:
-            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportID, backToReport));
+            Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(CONST.IOU.ACTION.CREATE, iouType, transactionID, reportIDToUse, backToReport));
     }
 };

This pattern already exists in IOURequestStepConfirmation.tsx where shouldUseTransactionReport is used to determine which report to display.

What alternative solutions did you explore?

1. Clear the transaction's reportID when navigating back - This would lose the user's report selection, requiring them to select it again.

2. Update route params when report changes - This is more complex and goes against the pattern of using the transaction as the source of truth for in-progress changes.

3. Prevent navigation back to amount page after report change - This reduces flexibility and doesn't match user expectations.

[jliexpensify]

Very odd, I can repro.

[melvin-bot]

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

[melvin-bot]

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

[QichenZhu]

The navigateToConfirmationPage function in IOURequestStepAmount uses the reportID from route params when navigating to the confirmation page. When the user changes the report on the confirmation page, the transaction's reportID is updated in Onyx, but the route params remain unchanged. When navigating back and clicking Next again, the stale reportID from route params is used instead of the updated one stored in the transaction.

@abbasifaizan70, thanks for the proposal!

1. The reportID is the workspace chat report ID, which looks correct to me. That's why the user can select between the two empty reports under it. If you change the reportID to one of the empty reports, the user can't switch to another one on the confirmation page.
2. Why does the reportID mismatch send the user back to the amount page? This seems like the real issue.

[IjaazA]

Proposal

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

When a user creates an expense from a workspace chat, navigates to the confirm page, changes the report on the confirm page, and then goes back to the amount page, clicking the "Next" button reopens the amount page instead of navigating to the confirm page.

What is the root cause of that problem?

The root cause is a mismatch between the reportID in the route parameters and the reportID stored in the transaction object.

When the user changes the report on the confirm page, the transaction's reportID is updated in Onyx. However, when the user navigates back to the amount page, the route parameters still contain the original reportID (the workspace chat report ID).

In IOURequestStepAmount, the navigateToNextPage function uses report?.reportID (which comes from the route params via withWritableReportOrNotFound) to determine navigation logic. When it checks if (report?.reportID && ...), it uses the old reportID from route params, not the updated one from the transaction. Then, when navigateToConfirmationPage() is called, it uses reportID from route params, which doesn't match the transaction's reportID.

When the confirm page loads with a mismatched reportID, it detects that the transaction's reportID doesn't match the route param reportID and redirects back to the amount page, creating a loop.

The issue is that the amount page doesn't account for the case where transaction.reportID has been changed and differs from the route param reportID.

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

The solution is to use the transaction's reportID when it exists and differs from the route param reportID, ensuring we always use the correct report that matches the transaction.

1. Check if transaction?.reportID exists and differs from the route param reportID. If so, use the transaction's reportID; otherwise, use the route param reportID.

2. Use useOnyx to fetch the report using the target reportID (transaction's reportID if different, otherwise route param reportID). Create an effectiveReport that uses the target report if it exists, otherwise falls back to the report from route params.

3. Replace all usages of report with effectiveReport in the navigation logic, including:

   • Checking if report exists and is not archived
   • Getting participants from the report
   • Navigating to the confirm page with the correct reportID
   • All other report-dependent operations

4. Use the transaction's reportID when navigating to the confirm page if it differs from the route param reportID.

// In IOURequestStepAmount component

// Determine target reportID - use transaction's reportID if it exists and differs from route param
const targetReportID = transaction?.reportID && transaction.reportID !== reportID 
    ? transaction.reportID 
    : reportID;

// Fetch the report using target reportID
const [targetReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${targetReportID}`, {canBeMissing: true});

// Use target report if it exists, otherwise fall back to route param report
const effectiveReport = targetReport?.reportID ? targetReport : report;

// Use effectiveReport for all report-dependent operations
const isReportArchived = useReportIsArchived(effectiveReport?.reportID);
const policyID = effectiveReport?.policyID;

// In navigateToConfirmationPage
const navigateToConfirmationPage = () => {
    // Use transaction's reportID if it exists and differs from route param reportID
    const targetReportID = transaction?.reportID && transaction.reportID !== reportID 
        ? transaction.reportID 
        : reportID;
    
    // Navigate with targetReportID
    Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(..., targetReportID, ...));
};

// In navigateToNextPage
if (effectiveReport?.reportID && !isReportArchived && iouType !== CONST.IOU.TYPE.CREATE) {
    const selectedParticipants = getMoneyRequestParticipantsFromReport(effectiveReport);
    // ... use effectiveReport for all operations
    setMoneyRequestParticipantsFromReport(transactionID, effectiveReport).then(() => {
        navigateToConfirmationPage();
    });
}

What alternative solutions did you explore? (Optional)

NA