[Due for Payment 2026-04-09][$250] Expenses – Bottom comments are briefly displayed when switching between chats

[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.59-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/folder/13176676/test-cases/41237298
Email or phone of affected tester (no customers): sintayewhaylu01@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensfy.com
2. Create an expense in Workspace chat
3. Open the expense details and add multiple comments (20 or more)
4. Scroll up and submit the expense
   4, Retract the expense
5. Change the category or tag
6. Navigate away from the expense, then return to it

Expected Result:

Updating the category or tag should not cause the bottom comments to briefly appear

Actual Result:

In Steps 6 and 7, the bottom comments briefly appear whenever opening the expense detail page or updating the category or tag

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

Bug7004444_1763161618387.bandicam_2025-11-15_01-31-18-981.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021990264804839923457
• Upwork Job ID: 1990264804839923457
• Last Price Increase: 2025-11-24

Issue Owner

Current Issue Owner: @mallenexpensify

[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.

[melvin-bot]

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

[melvin-bot]

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

[proBhavesh]

Proposal

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

When updating an expense's category or tag and navigating back, the bottom ~50 comments briefly flash on screen during navigation.

What is the root cause of that problem?

In transaction/IOU reports, shouldScrollToEndAfterLayout state is initialized to true on mount. When navigating back from category selection, the component remounts with this state still true, causing the FlatList to render with opacity: 0, then transition to opacity: 1 before the scroll corrects. During this transition, the bottom 50 items (from initialNumToRender) are visible, causing the flash.

State initialization:

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

Line 205 in a66525c

const [shouldScrollToEndAfterLayout, setShouldScrollToEndAfterLayout] = useState(shouldFocusToTopOnMount && !reportActionID);

Opacity control that causes the flash:

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

Lines 864 to 868 in a66525c

	contentContainerStyle={[
	styles.chatContentScrollView,
	shouldScrollToEndAfterLayout ? styles.opacity0 : styles.opacity1,
	shouldFocusToTopOnMount ? styles.justifyContentEnd : undefined,
	]}

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

Add a useLayoutEffect after the visibility effect to detect when remounting a report with existing actions and reset the flag before browser paint:

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

Line 215 in a66525c

useLayoutEffect(() => {
    if (!shouldScrollToEndAfterLayout) return;
    if (reportActionID) return;
    if (sortedVisibleReportActions.length === 0) return;
    if (hasCreatedActionAdded) return;

    setShouldScrollToEndAfterLayout(false);
}, [report.reportID, shouldScrollToEndAfterLayout]);

Using useLayoutEffect (not useEffect) ensures this runs synchronously before browser paint, preventing any visual flash.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 @proBhavesh! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[proBhavesh]

Contributor details
Your Expensify account email: probhavsh@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0105269ba7e75f1a0e?mp_source=share

[allroundexperts]

@proBhavesh Can you please share the result of applying your proposal? This seems to happen even after applying your fix.

[marufsharifi]

Proposal

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

Expenses – Bottom comments are briefly displayed when switching between chats

What is the root cause of that problem?

This PR introduced this issue.

We returned undefined for the entire maintainVisibleContentPosition object, which made minIndexForVisible effectively undefined. On Web (especially Chrome), undefined does not disable MVCP; instead, the browser treats it as an invalid anchor. This causes Chrome to choose the wrong DOM node as the anchor during the content update, which results in the list jumping or shifting when new items render.

App/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

Lines 92 to 96 in 1d0ce34

	const maintainVisibleContentPosition = useMemo(() => {
	if (!initialScrollKey && (!isInitialData || !isQueueRendering)) {
	return undefined;
	}

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

App/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

Lines 92 to 96 in 1d0ce34

	const maintainVisibleContentPosition = useMemo(() => {
	if (!initialScrollKey && (!isInitialData || !isQueueRendering)) {
	return undefined;
	}

We should return null for minIndexForVisible instead of a undefined or numeric value. Setting it to null fully disables MVCP anchoring during the initial render, which prevents Chrome from incorrectly selecting an anchor item and causing the list to jump. Once the list is stable, MVCP can be re-enabled as needed.

 const maintainVisibleContentPosition = useMemo(() => {
        if (!initialScrollKey && (!isInitialData || !isQueueRendering)) {
            return {
                minIndexForVisible: null,
            };
        }

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)