[Due for payment 2025-03-31] Web - Expense - Chat jumps to the top briefly each time expense preview is generated

[mitarachim]

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.1.16-2
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): sdmojisdsdjsiodmj@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Chat Report View

Action Performed:

1. Go to staging.new.expensify.com
2. Go to any chat.
3. Click + > Split expense > Manual.
4. Split a few expenses.

Expected Result:

Each time the split preview and expense preview are created, the chat will auto-scroll smoothly.

Actual Result:

Each time the split preview and expense preview are created, the chat does not auto-scroll smoothly.
The chat jumps to the top briefly each time a new expense preview is generated.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6777404_1742506837686.20250321_053521.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @OfstadC

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @mollfpr (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[nkdengineer]

Proposal

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

Each time the split preview and expense preview are created, the chat does not auto-scroll smoothly.
The chat jumps to the top briefly each time a new expense preview is generated.

What is the root cause of that problem?

After we create a split bill, we always call dismissModal and navigateToReportWithPolicyCheck. Then we can see the DISSMISS_MODAL throw error because navigateToReportWithPolicyCheck was done first and the screen jumps because the new report screen is added

App/src/libs/actions/IOU.ts

Line 5736 in c9c9d1e

dismissModalAndOpenReportInInboxTab(existingSplitChatReportID);

App/src/libs/Navigation/Navigation.ts

Lines 571 to 576 in c9c9d1e

	dismissModal();
	navigateToReportWithPolicyCheck(navigateToReportPayload);
	});
	};
	/**

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

I think we should apply the same logic on the small screen that only calls the dismissModal if the topmostReportID is the target report in the payload

const dismissModalWithReport = (navigateToReportPayload: NavigateToReportWithPolicyCheckPayload, ref = navigationRef) => {
  isNavigationReady().then(() => {
      const topmostReportID = getTopmostReportId();
      const areReportsIDsDefined = !!topmostReportID && !!navigateToReportPayload.reportID;
      const isReportsSplitTopmostFullScreen = ref.getRootState().routes.findLast((route) => isFullScreenName(route.name))?.name === NAVIGATORS.REPORTS_SPLIT_NAVIGATOR;
      if (topmostReportID === navigateToReportPayload.reportID && areReportsIDsDefined && isReportsSplitTopmostFullScreen) {
          dismissModal();
          return;
      }
      navigateToReportWithPolicyCheck(navigateToReportPayload, getIsNarrowLayout());
  });
};

App/src/libs/Navigation/Navigation.ts

Lines 571 to 576 in c9c9d1e

	dismissModal();
	navigateToReportWithPolicyCheck(navigateToReportPayload);
	});
	};
	/**

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)

NA

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.