Expense - Loading indefinitely when no description is saved.

[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: 9.2.66-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2227/folder/13177075/41237833/1045762614
Email or phone of affected tester (no customers): joelarmandotester+595@gmail.com
Issue reported by: Applause Internal Team
Device used: IPhone 12 / IOS 26.1
App Component: Money Requests

Action Performed:

1. Open the Hybrid app.
2. Create a new account.
3. Start a chat with any user.
4. Create an expense.
5. In the description section, type any comments and swipe right to go back without saving your changes.
6. Tap on create expense button.

Expected Result:

It should avoid going back without displaying the modal to discard the changes made to the description.

Actual Result:

The modal for discarding changes made is not displayed, which causes the expense to load indefinitely when it is created.

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

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

[jponikarchuk]

I'm not sure if it is the same root issue as this KI

[abbasifaizan70]

Proposal: Fix Missing Discard Changes Modal on Swipe-Back Gesture

Proposal

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

When creating an expense in the Hybrid app, if a user:

1. Opens the Description field and types comments
2. Swipes right to go back without saving changes
3. Taps the "Create Expense" button

Expected Result: A modal should appear asking to discard the unsaved changes before navigating back when swiping right.

Actual Result: The discard changes modal is not displayed when swiping back, and the expense loads indefinitely when it is created. This happens because:

• The swipe-back gesture bypasses the beforeRemove navigation event on native platforms
• The form state becomes inconsistent (unsaved changes in descriptionRef but navigation has already occurred)
• When the user then tries to create the expense, the inconsistent state causes the expense to hang in a loading state

What is the root cause of that problem?

The issue occurs because the native implementation of DiscardChangesConfirmation has several problems:

1. Swipe-back gesture bypasses beforeRemove event: On native platforms (iOS/Android), swipe-back gestures can complete navigation before the beforeRemove event fires, or the event may not fire at all for gesture-based navigation. This allows navigation to proceed without showing the discard confirmation modal.

2. Missing state cleanup on cancel: When the user cancels the discard modal, the blockedNavigationAction.current ref is not reset, which can leave navigation state in an inconsistent state.

3. Missing onCancel callback handling: The native version doesn't properly handle the onCancel callback to refocus the input field (unlike the web version), which can cause UX issues.

4. No cleanup on modal hide: The native version doesn't reset the blockedNavigationAction ref when the modal is hidden, which can cause issues if the user dismisses the modal in unexpected ways.

5. Form state inconsistency: When navigation proceeds without the modal showing, the descriptionRef.current contains unsaved changes, but the screen has already navigated away. This creates an inconsistent state that causes the expense creation to hang indefinitely.

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

Changes needed:

1. Update DiscardChangesConfirmation native component (App/src/pages/iou/request/step/DiscardChangesConfirmation/index.native.tsx):

   • Add proper cleanup in onCancel handler to reset blockedNavigationAction.current
   • Add onModalHide handler to ensure cleanup when modal is dismissed
   • Use InteractionManager.runAfterInteractions in onConfirm to ensure navigation happens after modal closes
   • Ensure onCancel callback is properly called to refocus the input (matching web behavior)
   • Add the missing onCancel prop parameter that is already defined in the types but not used

2. Verify IOURequestStepDescription passes onCancel prop:

   • The component already passes onCancel to DiscardChangesConfirmation, but we should verify it's working correctly

Specific code changes:

// In DiscardChangesConfirmation/index.native.tsx
function DiscardChangesConfirmation({getHasUnsavedChanges, onCancel, onConfirm}: DiscardChangesConfirmationProps) {
    // ... existing code ...
    
    return (
        <ConfirmModal
            isVisible={isVisible}
            title={translate('discardChangesConfirmation.title')}
            prompt={translate('discardChangesConfirmation.body')}
            danger
            confirmText={translate('discardChangesConfirmation.confirmText')}
            cancelText={translate('common.cancel')}
            onConfirm={() => {
                setIsVisible(false);
                onConfirm?.();
                // Use InteractionManager to ensure navigation happens after modal closes
                InteractionManager.runAfterInteractions(() => {
                    if (blockedNavigationAction.current) {
                        navigationRef.current?.dispatch(blockedNavigationAction.current);
                        blockedNavigationAction.current = undefined;
                    }
                });
            }}
            onCancel={() => {
                setIsVisible(false);
                blockedNavigationAction.current = undefined; // Reset blocked action
                onCancel?.(); // Call onCancel to refocus input
            }}
            onModalHide={() => {
                // Ensure cleanup on modal hide
                blockedNavigationAction.current = undefined;
            }}
            shouldHandleNavigationBack
        />
    );
}

Note: The onCancel prop is already defined in the types and passed from IOURequestStepDescription, but it's not being used in the native component's onCancel handler.

What alternative solutions did you explore? (Optional)

N/A

[mkzie2]

Proposal

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

The modal for discarding changes made is not displayed, which causes the expense to load indefinitely when it is created.

What is the root cause of that problem?

We're using useBeforeRemove here to prevent going back without saving the description:

App/src/pages/iou/request/step/DiscardChangesConfirmation/index.native.tsx

Lines 14 to 27 in f82a8db

	useBeforeRemove(
	useCallback(
	(e) => {
	if (!getHasUnsavedChanges()) {
	return;
	}
	e.preventDefault();
	blockedNavigationAction.current = e.data.action;
	setIsVisible(true);
	},
	[getHasUnsavedChanges],
	),
	);

As noted in the hook and also warned in the official doc, this hook will not work properly with IOS swipe back gesture. This causes the inconsistent navigation state between native stack and JS state, leading to the confirmation page is not removed from screen after confirm and the loading state stays.

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

We should migrate to use usePreventRemove hook instead. We'll need some variable adjustments since usePreventRemove uses a boolean variable as first param instead of calling a check function as current implementation. Details can be discussed further in PR phase.

Screen.Recording.2025-12-01.at.00.19.08.mov

We should check and migrate other usage of useBeforeRemove as well.

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.