[Due for payment 2025-06-25] [$250] Expense - Deleted unreported expense can be selected and added to report in offline mode

[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.1.63-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+2309n3@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Account has self DM

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Click + > Create report
4. Go to self DM
5. Track a manual expense in self DM
6. Go offline
7. Delete the track expense in Step 5
8. Go to workspace chat
9. On the empty report preview, click Add expense > Add unreported expense
10. Select the deleted track expense
11. Click Add to report

Expected Result:

In Step 10, the deleted track expense should not be selectable in the unreported expense list in offline mode

Actual Result:

In Step 10, the deleted track expense can be selected in the unreported expense list in offline mode
In Step 11, the deleted track expense can be added to the report in offline mode

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

Bug6855632_1749564626828.20250610_220522.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021932574259491017410
• Upwork Job ID: 1932574259491017410
• Last Price Increase: 2025-06-10

Issue Owner

Current Issue Owner: @twisterdotcom

[melvin-bot]

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

[ryntgh]

🚨 Edited by proposal-police: This proposal was edited at 2025-06-10 14:42:28 UTC.

Proposal

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

Expense - Deleted unreported expense can be selected and added to report in offline mode

What is the root cause of that problem?

Transaction with pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE are not being marked as disabled in the unreported expenses list when offline. While the transactions appear in the list, they remain selectable

The transactions are being included in the data without checking their pendingAction status to determine if they should be disabled:

App/src/pages/AddUnreportedExpense.tsx

Lines 71 to 76 in a3e39d2

	const sections: Array<SectionListDataType<Transaction & ListItem>> = [
	{
	shouldShow: true,
	data: transactions.filter((t): t is Transaction & ListItem => t !== undefined),
	},
	];

This doesn't set the isDisabled property based on the transaction's pending action, so deleted transactions remain selectable even though they shouldn't be

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

We should modify the sections data structure to map transactions and set the isDisabled to true for transactions that have pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE. This will make deleted transactions visible but unselectable in offline mode

const sections: Array<SectionListDataType<Transaction & ListItem>> = [
    {
        shouldShow: true,
        data: transactions
            .filter((t): t is Transaction & ListItem => t !== undefined)
            .map((transaction) => ({
                ...transaction,
                isDisabled: transaction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
            })),
    },
];

App/src/pages/AddUnreportedExpense.tsx

Lines 71 to 76 in a3e39d2

	const sections: Array<SectionListDataType<Transaction & ListItem>> = [
	{
	shouldShow: true,
	data: transactions.filter((t): t is Transaction & ListItem => t !== undefined),
	},
	];

We can also prevent adding disabled transactions to the selectedIds set in the onSelectRow handler

onSelectRow={(item) => {
    if (item.isDisabled) {
        return;
    }
    ...

App/src/pages/AddUnreportedExpense.tsx

Line 161 in a3e39d2

onSelectRow={(item) => {

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

N/A

What alternative solutions did you explore? (Optional)

Alternatively, we can also update the getUnreportedTransactions function to exclude transactions that have a delete pending action

function getUnreportedTransactions(transactions: OnyxCollection<Transaction>) {
    if (!transactions) {
        return [];
    }
    return Object.values(transactions || {}).filter((item) => {
        const isUnreported = item?.reportID === CONST.REPORT.UNREPORTED_REPORT_ID || item?.reportID === '';
        const isNotBeingDeleted = item?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
        return isUnreported && isNotBeingDeleted;
    });
}

App/src/pages/AddUnreportedExpense.tsx

Line 44 in a3e39d2

function getUnreportedTransactions(transactions: OnyxCollection<Transaction>) {

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-06-10 15:45:50 UTC.

Proposal

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

In Step 10, the deleted track expense can be selected in the unreported expense list in offline mode
In Step 11, the deleted track expense can be added to the report in offline mode

What is the root cause of that problem?

In offline, the transaction isn't deleted completely, it's only added pendingAction as delete and we don't filter or disable this here so we still can select this transaction

App/src/pages/AddUnreportedExpense.tsx

Lines 71 to 77 in a3e39d2

	const sections: Array<SectionListDataType<Transaction & ListItem>> = [
	{
	shouldShow: true,
	data: transactions.filter((t): t is Transaction & ListItem => t !== undefined),
	},
	];

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

To make the pending delete transaction unselectable, we can add isInteractive as false if this transaction is pending delete

const sections: Array<SectionListDataType<Transaction & ListItem>> = [
    {
        shouldShow: true,
        data: transactions
            .filter((t): t is Transaction & ListItem => t !== undefined)
            .map((t) => ({
                ...t,
                isInteractive: t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
            })),
    },
];

App/src/pages/AddUnreportedExpense.tsx

Lines 71 to 77 in a3e39d2

	const sections: Array<SectionListDataType<Transaction & ListItem>> = [
	{
	shouldShow: true,
	data: transactions.filter((t): t is Transaction & ListItem => t !== undefined),
	},
	];

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)

We can filter out the pending deleted transactions from the list

const sections: Array<SectionListDataType<Transaction & ListItem>> = [
    {
        shouldShow: true,
        data: transactions.filter((t): t is Transaction & ListItem => t !== undefined && t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE),
    },
];

App/src/pages/AddUnreportedExpense.tsx

Lines 71 to 77 in a3e39d2

	const sections: Array<SectionListDataType<Transaction & ListItem>> = [
	{
	shouldShow: true,
	data: transactions.filter((t): t is Transaction & ListItem => t !== undefined),
	},
	];

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

[melvin-bot]

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

[ikevin127]

♻ Reviewing proposals...

[cretadn22]

Proposal

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

Deleted unreported expense can be selected and added to report in offline mode

What is the root cause of that problem?

We don't disable the pending delete transaction in the unreported expense list

App/src/pages/AddUnreportedExpense.tsx

Lines 71 to 77 in a3e39d2

	const sections: Array<SectionListDataType<Transaction & ListItem>> = [
	{
	shouldShow: true,
	data: transactions.filter((t): t is Transaction & ListItem => t !== undefined),
	},
	];

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

Need to include isInteractive and isDisabled to prevent the transaction from proceeding if it's pending deletion or has encountered an error

    const sections: Array<SectionListDataType<Transaction & ListItem>> = [
        {
            shouldShow: true,
            data: transactions
                .filter((t): t is Transaction & ListItem => t !== undefined)
                .map((t) => ({
                    ...t,
                    isInteractive: !isTransactionPendingDelete(t) && !t.errors,
                    isDisabled: isTransactionPendingDelete(t) || !!t.errors,
                })),
        },
    ];

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)

[ikevin127]

Thanks everyone for the proposals!

Looking in our codebase for similar offline behaviour scenarios, I noticed that isInteractive has very limited use, we rely mostly on isDisabled for such cases as disabling selection while offline.

As for disabling selection when there are errors on the transaction, I think it's out of scope and also does not make much sense to me, as you should be able to add transactions to a report even if said transaction contains errors (e.g. missing fields).

Let's go with @ryntgh's proposal as they were first to identify the root cause and propose a working solution targeting the issue's Expected result.

Note

Notes for PR

1. While I've noticed instances where we check using transaction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, I'd say let's actually use the TransactionUtils isTransactionPendingDelete function.
2. Wrap sections with useMemo for performance optimization, passing transactions as dependency. This will help in case we have a lot of transactions in the list which can receive BE pusher updates, causing sections to be recreated multiple times which can cause performance issues given we map the transactions to pass isDisabled.
3. We can skip adding the item.isDisabled early return to onSelectRow since that's already handled by the SelectionList internally simply from passing isDisabled to the sections individual item.

🎀👀🎀 C+ reviewed