[Due for payment 2025-08-01] [$250] mWeb - Expense - Create expense page is shown briefly when adding unreported expense to report

[jponikarchuk]

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: V9.1.76-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/6428613
Email or phone of affected tester (no customers): Slottwo1 249553g44@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Money Requests

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Open self dm
3. Create a track manual expense
4. Open workpace chat
5. Create a report
6. Open drop down and select add Unreported expense
7. Select the expense
8. Tap add to report

Expected Result:

On adding unreported expense to report briefly create expense page must not be shown.

Actual Result:

On adding unreported expense to report briefly create expense page is shown.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021940997829224157860
• Upwork Job ID: 1940997829224157860
• Last Price Increase: 2025-07-04
• Automatic offers:
• daledah | Contributor | 107966673

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

[daledah]

Proposal

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

On adding unreported expense to report briefly create expense page is shown.

What is the root cause of that problem?

We call dismissModal and changeTransactionsReport at the same time

App/src/pages/AddUnreportedExpense.tsx

Lines 184 to 185 in 755b505

	Navigation.dismissModal();
	changeTransactionsReport([...selectedIds], report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID, policy);

So the optimistic data is merged before the screen finishes navigating and "No unreported expenses" is shown briefly

App/src/pages/AddUnreportedExpense.tsx

Lines 98 to 140 in 755b505

	if (thereIsNoUnreportedTransaction) {
	return (
	<ScreenWrapper
	shouldEnableKeyboardAvoidingView={false}
	includeSafeAreaPaddingBottom
	shouldShowOfflineIndicator={false}
	shouldEnablePickerAvoiding={false}
	testID={NewChatSelectorPage.displayName}
	focusTrapSettings={{active: false}}
	>
	<HeaderWithBackButton
	title={translate('iou.addUnreportedExpense')}
	onBackButtonPress={Navigation.goBack}
	/>
	<EmptyStateComponent
	cardStyles={[styles.appBG]}
	cardContentStyles={[styles.pt5, styles.pb0]}
	headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
	headerMedia={LottieAnimations.GenericEmptyState}
	title={translate('iou.emptyStateUnreportedExpenseTitle')}
	subtitle={translate('iou.emptyStateUnreportedExpenseSubtitle')}
	headerStyles={[styles.emptyStateMoneyRequestReport]}
	lottieWebViewStyles={styles.emptyStateFolderWebStyles}
	headerContentStyles={styles.emptyStateFolderWebStyles}
	buttons={[
	{
	buttonText: translate('iou.createExpense'),
	buttonAction: () => {
	if (report && report.policyID && shouldRestrictUserBillableActions(report.policyID)) {
	Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(report.policyID));
	return;
	}
	interceptAnonymousUser(() => {
	startMoneyRequest(CONST.IOU.TYPE.SUBMIT, reportID, undefined, false, backToReport);
	});
	},
	success: true,
	},
	]}
	/>
	</ScreenWrapper>
	);
	}

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

We should delay the changeTransactionsReport here

App/src/pages/AddUnreportedExpense.tsx

Lines 184 to 185 in 755b505

	Navigation.dismissModal();
	changeTransactionsReport([...selectedIds], report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID, policy);

InteractionManager.runAfterInteractions(() => changeTransactionsReport([...selectedIds], report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID, policy));

Screen.Recording.2025-07-04.at.11.33.43.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None, UI issue.

What alternative solutions did you explore? (Optional)

We can call changeTransactionsReport on page unmount, but this approach will make more delays. Implement like below

const [isTransactionAdded, setIsTransactionAdded] = useState(false);

App/src/pages/AddUnreportedExpense.tsx

Lines 179 to 187 in 755b505

	onConfirm={() => {
	if (selectedIds.size === 0) {
	setErrorMessage(translate('iou.selectUnreportedExpense'));
	return;
	}
	Navigation.dismissModal();
	changeTransactionsReport([...selectedIds], report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID, policy);
	setErrorMessage('');
	}}

                onConfirm={() => {
                    if (selectedIds.size === 0) {
                        setErrorMessage(translate('iou.selectUnreportedExpense'));
                        return;
                    }
                    Navigation.dismissModal();
                    setIsTransactionAdded(true);
                    setErrorMessage('');
                }}

    useEffect(
        () => () => {
            if (!isTransactionAdded) {
                return;
            }
            changeTransactionsReport([...selectedIds], report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID, policy);
        },
        [isTransactionAdded, policy, report?.reportID, selectedIds],
    );

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.

[melvin-bot]

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

[melvin-bot]

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

[Shahidullah-Muffakir]

Proposal

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

When adding unreported expenses to a report, users briefly see the "create expense" page (empty state) before the modal is dismissed.

What is the root cause of that problem?

The issue happens because when we call changeTransactionsReport(), the unreported expenses immediately become reported expenses. This makes thereIsNoUnreportedTransaction become true, which triggers the component to re-render and show the empty state with the "create expense" button. This re-render happens before the modal is fully dismissed, causing the brief flash.

The problem occurs in this sequence:

1. User clicks "Add to report"
2. changeTransactionsReport() runs and moves expenses to the report
3. thereIsNoUnreportedTransaction becomes true because no unreported expenses are left
4. Component re-renders and shows empty state
5. Modal dismisses, but user already saw the empty state flash

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

We should add a state flag to track when we are in the process of adding transactions. This will prevent the empty state from showing during the transition period:

1. Add a new state isAddingTransactions to track when we're processing transactions

    const [isAddingTransactions, setIsAddingTransactions] = useState(false);

2. Update the thereIsNoUnreportedTransaction condition to also check this flag
   

   App/src/pages/AddUnreportedExpense.tsx

   Line 77 in 755b505

   const thereIsNoUnreportedTransaction = !((sections.at(0)?.data.length ?? 0) > 0);

   
   as:

    const thereIsNoUnreportedTransaction = !((sections.at(0)?.data.length ?? 0) > 0) && !isAddingTransactions;

3. Set the flag to true before processing transactions
   

   App/src/pages/AddUnreportedExpense.tsx

   Lines 179 to 187 in 755b505

   	onConfirm={() => {
   	if (selectedIds.size === 0) {
   	setErrorMessage(translate('iou.selectUnreportedExpense'));
   	return;
   	}
   	Navigation.dismissModal();
   	changeTransactionsReport([...selectedIds], report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID, policy);
   	setErrorMessage('');
   	}}

   
   as:

 onConfirm={() => {
     if (selectedIds.size === 0) {
         setErrorMessage(translate('iou.selectUnreportedExpense'));
         return;
     }
+    setIsAddingTransactions(true);
     Navigation.dismissModal();
     changeTransactionsReport([...selectedIds], report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID, policy);
     setErrorMessage('');
 }}

Now even when all unreported expenses are moved to reports, the empty state won't show during the transition because isAddingTransactions will be true.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

I don't think we need test for this, however if we want we can add a test to not show the EmptyStateComponent if the isAddingTransactions is true.

What alternative solutions did you explore? (Optional)

Using InteractionManager.runAfterInteractions(): This approach delays the changeTransactionsReport() call until after the modal dismisses. However, this creates another bug because:

• The expenses appears in the next report screen with a delay

Video for main solution

Screen.Recording.2025-07-04.at.11.34.23.AM.mov

[dmkt9]

Proposal

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

Create expense page is shown briefly when adding unreported expense to report

What is the root cause of that problem?

• Because after confirmation, the modal and change transaction are processed simultaneously:
  

  App/src/pages/AddUnreportedExpense.tsx

  Lines 184 to 185 in f181a83

  	Navigation.dismissModal();
  	changeTransactionsReport([...selectedIds], report?.reportID ?? CONST.REPORT.UNREPORTED_REPORT_ID, policy);

• Because the change transaction will change optimistic data first, it will re-render the list with an empty list. And we will see EmptyStateComponent before the modal is dismissed.

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

We should ensure that the data immediately before and after confirmation remains unchanged. This guarantees the list continues to render smoothly and prevents a delay where the new transaction is only added after the modal has fully disappeared

• Create a new ref to capture the transactions value as soon as the user confirms.
  

  App/src/pages/AddUnreportedExpense.tsx

  Line 48 in f181a83

  function getUnreportedTransactions(transactions: OnyxCollection<Transaction>) {

+ const transactionsAfterConfirmRef = useRef<Array<OnyxEntry<Transaction>> | null>(null);
function getUnreportedTransactions(transactions: OnyxCollection<Transaction>) {

• Persist the transactions when the confirmation occurs:
  

  App/src/pages/AddUnreportedExpense.tsx

  Line 184 in f181a83

  Navigation.dismissModal();

+ transactionsAfterConfirmRef.current = transactions;
Navigation.dismissModal();

• Return the stored data once confirmation is complete:
  

  App/src/pages/AddUnreportedExpense.tsx

  Line 48 in f181a83

  function getUnreportedTransactions(transactions: OnyxCollection<Transaction>) {

function getUnreportedTransactions(transactions: OnyxCollection<Transaction>) {
+    if (transactionsAfterConfirmRef.current) {
+        return transactionsAfterConfirmRef.current;
+    }

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

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.