Expense - Unable to delete expense from expense preview

[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.97-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: #79155
Email or phone of affected tester (no customers): sdsoidjnosnjdsodsjno@gmail.com
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Mac 26.1 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense.
4. Right click on the expense preview > Delete expense.
5. Click Delete.

Expected Result:

Expense will be deleted.

Actual Result:

Expense is not deleted.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[sohrabq]

Proposal

note:- the solution is tested on IOS app and safari web

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

Unable to delete expense from expense preview

What is the root cause of that problem?

The issue is a stale closure problem with React hooks and refs.

1. Context menu opens → reportActionRef.current is null at this point
2. Hooks run during render → useDeleteTransactions is called with:
   reportActions: reportActionRef.current ? [reportActionRef.current] : [] // Empty array!
3. User clicks "Delete expense" → showDeleteModal is called, which sets reportActionRef.current = reportAction
4. But hooks don't re-run because refs don't trigger re-renders
5. User confirms deletion → performDelete() calls deleteTransactions()
6. Inside deleteTransactions (from useDeleteTransactions):

const iouActions = reportActions.filter((action) => isMoneyRequestAction(action));
// iouActions is EMPTY because reportActions was empty when the hook ran

// Later, when trying to delete:
for (const {transactionID, action} of nonSplitTransactions) {
    if (!action) {
        continue;  // ← SKIPS DELETION because action is undefined
    }
    deleteMoneyRequest({...});
}

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

modify PopoverReportActionContextMenu.tsx with these changes:

1. Add a state variable for the report action during deletion

// Added new state variable
const [reportActionForDeletion, setReportActionForDeletion] = useState<NonNullable<OnyxEntry<ReportAction>> | null>(null);

2. Update hooks to use the state variable when available

// Before
const {iouReport, chatReport, isChatIOUReportArchived} = useGetIOUReportFromReportAction(reportActionRef.current);

// After
const {iouReport, chatReport, isChatIOUReportArchived} = useGetIOUReportFromReportAction(reportActionForDeletion ?? reportActionRef.current);

Same pattern applied to:
isOriginalReportArchived hook
currentReportAction variable used for transaction IDs
useDeleteTransactions hook's reportActions parameter
originalReport Onyx hook
3. Added a ref to track the latest performDelete function

// Use a ref to always access the latest version of performDelete
const performDeleteRef = useRef(performDelete);
useEffect(() => {
    performDeleteRef.current = performDelete;
}, [performDelete]);

4. update the clearActiveReportAction to clear the state

const clearActiveReportAction = useCallback(() => {
    reportActionIDRef.current = undefined;
    reportActionRef.current = null;
    setReportActionForDeletion(null);  // Added this line
}, []);

5. update showDeleteModel to set the state and use the ref

const showDeleteModal = useCallback(
    async (reportID, reportAction, ...) => {
        reportIDRef.current = reportID;
        reportActionRef.current = reportAction ?? null;
        // Added: Set state to trigger hooks re-run
        setReportActionForDeletion(reportAction ?? null);

        const result = await showConfirmModal({...});

        if (result.action === ModalActions.CONFIRM) {
            onConfirm();
            // Changed: Use ref instead of captured performDelete
            performDeleteRef.current();
        }
        // ...
    },
    [showConfirmModal, translate, clearActiveReportAction],  // Removed performDelete dependency
);

[yatin-italy]

Proposal

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

Deleting a track expense from the preview does nothing because the delete modal uses the IOU report ID instead of the chat report ID, and hooks run before the report action ref is set, making iouReport and chatReport undefined when delete executes.

What is the root cause of that problem?

1. Track expenses incorrectly use the IOU report ID instead of the chat report ID.
2. reportActionRef is not updated in time, causing hooks to read undefined reports.
3. performDelete closures can become stale without a ref.

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

1. Keep the chat report ID for track-expense actions.
2. Store the report action in state (reportActionForDeletion) so hooks run with the correct action. Clear it after deletion.
3. Use a ref (performDeleteRef) for the latest performDelete to avoid stale closures.

Patch:

// ContextMenuActions: keep chat report ID for track expense
const isTrackExpense = isMoneyRequestAction(moneyRequestAction) && isTrackExpenseAction(moneyRequestAction);
const reportID = isTrackExpense
    ? reportIDParam // use chat report for track expense
    : isMoneyRequestAction(moneyRequestAction)
        ? getOriginalMessage(moneyRequestAction)?.IOUReportID || reportIDParam
        : reportIDParam;

// PopoverReportActionContextMenu: state + ref to avoid stale hooks
const [reportActionForDeletion, setReportActionForDeletion] = useState<OnyxEntry<ReportAction> | null>(null);
const performDeleteRef = useRef(performDelete);
useEffect(() => { performDeleteRef.current = performDelete; }, [performDelete]);

const {iouReport, chatReport, isChatIOUReportArchived} = useGetIOUReportFromReportAction(reportActionForDeletion ?? reportActionRef.current);

const clearActiveReportAction = () => {
    reportActionIDRef.current = undefined;
    reportActionRef.current = null;
    setReportActionForDeletion(null);
};

const showDeleteModal = (reportID, reportAction, ...) => {
    reportActionRef.current = reportAction ?? null;
    setReportActionForDeletion(reportAction ?? null); // trigger hooks with correct action
    setIsDeleteCommentConfirmModalVisible(true);
};

// on confirm
performDeleteRef.current();

What alternative solutions did you explore? (Optional)

N/A