[Due for payment 2025-11-07] [$250] Expense - Arrow on the expense thread can navigate to the deleted expense

[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.33-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/test-runs/TR-1350/folder/13177029/41237798/958154075
Email or phone of affected tester (no customers): sjdonisjonsidjosij@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Create two expenses in the workspace chat
4. Open the expense report
5. Go offline
6. Open any expense thread
7. Click More > Delete
8. Delete the expense
9. Open the remaining expense
10. Click arrow button on the RHP

Expected Result:

Arrow button should be disabled and not open the deleted expense

Actual Result:

Arrow button is not disabled and it opens the deleted expense

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

Bug6977795_1760707466664.13.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021979226714841168693
• Upwork Job ID: 1979226714841168693
• Last Price Increase: 2025-10-24
• Automatic offers:
• gijoe0295 | Contributor | 109241069

Issue Owner

Current Issue Owner: @Pujan92

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

[nyomanjyotisa]

Proposal

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

Expense - Arrow on the expense thread can navigate to the deleted expense

What is the root cause of that problem?

The navigation finds the adjacent transaction in the transactionIDsList based on index position, but this list includes all transactions regardless of their deletion status. When the user clicks the arrow buttons, it navigates to a transaction that may be pending deletion

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionsNavigation.tsx

Lines 50 to 66 in 78b3db9

	const {prevTransactionID, prevParentReportAction, nextTransactionID, nextParentReportAction} = useMemo(() => {
	if (!transactionIDsList || transactionIDsList.length < 2) {
	return {prevTransactionID: undefined, prevParentReportAction: undefined, nextTransactionID: undefined, nextParentReportAction: undefined};
	}
	const currentTransactionIndex = transactionIDsList.findIndex((id) => id === currentTransactionID);
	const prevID = currentTransactionIndex > 0 ? transactionIDsList.at(currentTransactionIndex - 1) : undefined;
	const nextID = transactionIDsList.at(currentTransactionIndex + 1);
	return {
	prevTransactionID: prevID,
	nextTransactionID: nextID,
	prevParentReportAction: prevID ? parentReportActions.get(prevID) : undefined,
	nextParentReportAction: nextID ? parentReportActions.get(nextID) : undefined,
	};
	}, [currentTransactionID, parentReportActions, transactionIDsList]);

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

Change the navigation logic to skip transactions that are pending deletion when finding the next/previous transaction to navigate to

    const {prevTransactionID, prevParentReportAction, nextTransactionID, nextParentReportAction} = useMemo(() => {
        if (!transactionIDsList || transactionIDsList.length < 2) {
            return {prevTransactionID: undefined, prevParentReportAction: undefined, nextTransactionID: undefined, nextParentReportAction: undefined};
        }

        const currentTransactionIndex = transactionIDsList.findIndex((id) => id === currentTransactionID);

        // Find the previous transaction that is not pending deletion
        let prevID: string | undefined;
        for (let i = currentTransactionIndex - 1; i >= 0; i--) {
            const transactionID = transactionIDsList[i];
            const transaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`];
            if (!isTransactionPendingDelete(transaction)) {
                prevID = transactionID;
                break;
            }
        }

        // Find the next transaction that is not pending deletion
        let nextID: string | undefined;
        for (let i = currentTransactionIndex + 1; i < transactionIDsList.length; i++) {
            const transactionID = transactionIDsList[i];
            const transaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`];
            if (!isTransactionPendingDelete(transaction)) {
                nextID = transactionID;
                break;
            }
        }

        return {
            prevTransactionID: prevID,
            nextTransactionID: nextID,
            prevParentReportAction: prevID ? parentReportActions.get(prevID) : undefined,
            nextParentReportAction: nextID ? parentReportActions.get(nextID) : undefined,
        };
    }, [currentTransactionID, parentReportActions, transactionIDsList, allTransactions]);

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionsNavigation.tsx

Lines 50 to 66 in 78b3db9

	const {prevTransactionID, prevParentReportAction, nextTransactionID, nextParentReportAction} = useMemo(() => {
	if (!transactionIDsList || transactionIDsList.length < 2) {
	return {prevTransactionID: undefined, prevParentReportAction: undefined, nextTransactionID: undefined, nextParentReportAction: undefined};
	}
	const currentTransactionIndex = transactionIDsList.findIndex((id) => id === currentTransactionID);
	const prevID = currentTransactionIndex > 0 ? transactionIDsList.at(currentTransactionIndex - 1) : undefined;
	const nextID = transactionIDsList.at(currentTransactionIndex + 1);
	return {
	prevTransactionID: prevID,
	nextTransactionID: nextID,
	prevParentReportAction: prevID ? parentReportActions.get(prevID) : undefined,
	nextParentReportAction: nextID ? parentReportActions.get(nextID) : undefined,
	};
	}, [currentTransactionID, parentReportActions, transactionIDsList]);

We can also hide navigation arrows when fewer than 2 valid transactions exist

    const validTransactionCount = transactionIDsList.filter((transactionID) => {
        const transaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`];
        return !isTransactionPendingDelete(transaction);
    }).length;

    if (validTransactionCount < 2) {
        return;
    }

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionsNavigation.tsx

Line 85 in 78b3db9

if (transactionIDsList.length < 2) {

What alternative solutions did you explore? (Optional)

None

[gijoe0295]

Proposal

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

Arrow on the expense thread can navigate to the deleted expense

What is the root cause of that problem?

The list of navigate-able transactions include all visible transactions shown on the report:

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Lines 257 to 258 in 2a98af6

	const sortedSiblingTransactionIDs = sortedTransactions.map((transaction) => transaction.transactionID);
	setActiveTransactionIDs(sortedSiblingTransactionIDs).then(() => {

But these visible transactions also include the pending delete ones if we're offline:

App/src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

Line 106 in 01a806a

const visibleTransactions = transactions?.filter((transaction) => isOffline || transaction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);

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

Filter out the pending delete transactions there:

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Lines 257 to 258 in 2a98af6

	const sortedSiblingTransactionIDs = sortedTransactions.map((transaction) => transaction.transactionID);
	setActiveTransactionIDs(sortedSiblingTransactionIDs).then(() => {

const sortedSiblingTransactionIDs = sortedTransactions.filter((transaction) => transaction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE).map((transaction) => transaction.transactionID);

Need to apply the same in search page's transactions list too:

App/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx

Line 127 in 35e2aea

setActiveTransactionIDs(siblingTransactionIDs).then(() => {

What alternative solutions did you explore? (Optional)

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/~021979226714841168693

[melvin-bot]

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

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-18 09:19:30 UTC.

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

I use different method, so I think the bot was wrong

Proposal

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

Arrow on the expense thread can navigate to the deleted expense

What is the root cause of that problem?

We don't filter out pending delete transactions from the navigation list, even when offline, because deleted transactions should not be navigable

App/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Line 257 in 7165a14

const sortedSiblingTransactionIDs = sortedTransactions.map((transaction) => transaction.transactionID);

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

We have 2 ways to solve the issue

1. We can fetch transactions from useOnyx with selector to remove pending delete transactions

    const [transactions = {}] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
        canBeMissing: true,
        selector: nonPendingTransactionsSelector,
    });

2. We can update to filter out pending delete txn by using isTransactionPendingDelete function

const sortedSiblingTransactionIDs = sortedTransactions.filter((transaction) => !isTransactionPendingDelete(transaction)).map((transaction) => transaction.transactionID);

Similarly, we should filter this out as well

const siblingTransactionIDs = transactions.filter((transaction) => !isTransactionPendingDelete(transaction)).map((transaction) => transaction.transactionID);

App/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx

Line 123 in 35e2aea

const siblingTransactionIDs = transactions.map((transaction) => transaction.transactionID);

What alternative solutions did you explore? (Optional)

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.