[Due for payment 2025-12-30] [$250] Expense - Member when removed offline still appears in Add approver list

[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.75-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: #68353
Email or phone of affected tester (no customers): dsdjonisdjosjosdsjsoidj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Critical User Impact
Device used: Mac 26.1 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Workflow is on Control plan.
• Admin has invited a user to the workspace.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense.
4. Open the expense report.
5. Click Submit.
6. Go to workspace settings > Members.
7. Go offline.
8. Remove the member offline.
9. Go back to the expense report from Step 4.
10. Click More > Change approver.
11. Click Add approver > Change approver.
12. Click on the removed member > Save.

Expected Result:

The removed member should no longer appear in the list in Step 12.

Actual Result:

The removed member still appears in the list in Step 12.
When the removed member is selected and Save button is clicked, nothing happens.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7026813_1765460694902.24.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021999481519130109944
• Upwork Job ID: 1999481519130109944
• Last Price Increase: 2025-12-12

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

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

[ShridharGoel]

Proposal

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

When a workspace admin removes a member while offline, that still shows up in the Change approver list.

What is the root cause of that problem?

The list builder pulls every policy member email and turns it into a selectable approver, even when the member is pending deletion or we cannot map the email to a real account ID. The pending-delete check looks up the member by account ID instead of by email, so removed members are not filtered out.

App/src/pages/ReportAddApproverPage.tsx

Lines 48 to 84 in bd180d7

	const employeeList = policy?.employeeList;
	const allApprovers = useMemo(() => {
	if (!employeeList) {
	return [];
	}
	const policyMemberEmailsToAccountIDs = getMemberAccountIDsForWorkspace(employeeList, true, false);
	return Object.values(employeeList)
	.map((employee): SelectionListApprover | null => {
	const isAdmin = employee?.role === CONST.REPORT.ROLE.ADMIN;
	const email = employee.email;
	if (!email) {
	return null;
	}
	const accountID = Number(policyMemberEmailsToAccountIDs[email] ?? CONST.DEFAULT_NUMBER_ID);
	const isPendingDelete = employeeList?.[accountID]?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
	// Filter the current report approver and members which are pending for deletion
	if (report.managerID === accountID || isPendingDelete || !isAllowedToApproveExpenseReport(report, accountID, policy)) {
	return null;
	}
	const {avatar} = personalDetails?.[accountID] ?? {};
	const displayName = getDisplayNameForParticipant({accountID, personalDetailsData: personalDetails, formatPhoneNumber});
	return {
	text: displayName,
	alternateText: email,
	keyForList: email,
	isSelected: selectedApproverEmail === email,
	login: email,
	value: accountID,
	icons: [{source: avatar ?? icons.FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: displayName, id: accountID}],
	rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
	};
	})
	.filter((approver): approver is SelectionListApprover => !!approver);

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

Filter out unusable entries before creating options:

const policyMemberEmailsToAccountIDs = getMemberAccountIDsForWorkspace(employeeList, true, false);
return Object.values(employeeList)
    .map((employee): SelectionListApprover | null => {
        const isAdmin = employee?.role === CONST.REPORT.ROLE.ADMIN;
        const email = employee.email;

        if (!email) {
            return null;
        }
        const accountID = policyMemberEmailsToAccountIDs[email];
        const isPendingDelete = employee?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

        // Skip members we can't map to an accountID (e.g. missing personal details) or are pending deletion
        if (!accountID || isPendingDelete) {
            return null;
        }

        if (report.managerID === accountID || !isAllowedToApproveExpenseReport(report, accountID, policy)) {
            return null;
        }

        const {avatar} = personalDetails?.[accountID] ?? {};
        const displayName = getDisplayNameForParticipant({accountID, personalDetailsData: personalDetails, formatPhoneNumber});
        return {
            text: displayName,
            alternateText: email,
            keyForList: email,
            isSelected: selectedApproverEmail === email,
            login: email,
            value: accountID,
            icons: [{source: avatar ?? icons.FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: displayName, id: accountID}],
            rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
        };
    })
    .filter((approver): approver is SelectionListApprover => !!approver);

This keeps removed or unmapped members out of the options, so the list shows only valid approvers and the Save action works offline.

[etCoderDysto]

Proposal

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

Expense - Member when removed offline still appears in Add approver list

What is the root cause of that problem?

When trying to filter pendingDelete members, we are trying to get employe by using accountID key when we can only get it with email key from employeeList

App/src/pages/ReportAddApproverPage.tsx

Line 64 in 10192b7

const isPendingDelete = employeeList?.[accountID]?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

Then we display the approvers

App/src/pages/ReportAddApproverPage.tsx

Lines 127 to 139 in 10192b7

	<ApproverSelectionList
	testID={ReportAddApproverPage.displayName}
	headerTitle={translate('iou.changeApprover.actions.addApprover')}
	onBackButtonPress={() => {
	Navigation.goBack(ROUTES.REPORT_CHANGE_APPROVER.getRoute(report.reportID), {compareParams: false});
	}}
	subtitle={<Text style={[styles.ph5, styles.pb3]}>{translate('iou.changeApprover.addApprover.subtitle')}</Text>}
	isLoadingReportData={isLoadingReportData}
	policy={policy}
	initiallyFocusedOptionKey={selectedApproverEmail}
	shouldShowNotFoundViewLink={false}
	shouldShowNotFoundView={shouldShowNotFoundView}
	allApprovers={allApprovers}

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

We should use employee?.pendingAction instead

const isPendingDelete = employee?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

What alternative solutions did you explore? (Optional)

We can use email isntead of account id to get the employee details

                const isPendingDelete = employeeList?.[email]?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

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.

[daledah]

Proposal

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

The removed member still appears in the list in Step 12.
When the removed member is selected and Save button is clicked, nothing happens.

What is the root cause of that problem?

We are get the member account ids with the includeMemberWithPendingDelete param is false here

App/src/libs/PolicyUtils.ts

Line 371 in 10192b7

function getMemberAccountIDsForWorkspace(employeeList: PolicyEmployeeList | undefined, includeMemberWithErrors = false, includeMemberWithPendingDelete = true): MemberEmailsToAccountIDs {

App/src/pages/ReportAddApproverPage.tsx

Line 54 in 10192b7

const policyMemberEmailsToAccountIDs = getMemberAccountIDsForWorkspace(employeeList, true, false);

=> policyMemberEmailsToAccountIDs will not have the account that is pending delete => isPendingDelete is undefined

App/src/pages/ReportAddApproverPage.tsx

Lines 63 to 64 in 10192b7

	const accountID = Number(policyMemberEmailsToAccountIDs[email] ?? CONST.DEFAULT_NUMBER_ID);
	const isPendingDelete = employeeList?.[accountID]?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

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

We should call the function getMemberAccountIDsForWorkspace with includeMemberWithPendingDelete is true

    const policyMemberEmailsToAccountIDs = getMemberAccountIDsForWorkspace(employeeList, true, true);

App/src/pages/ReportAddApproverPage.tsx

Line 54 in bd180d7

const policyMemberEmailsToAccountIDs = getMemberAccountIDsForWorkspace(employeeList, true, false);

then use email instead of accountID here because Onyx employees are mapping by email

    const isPendingDelete = employeeList?.[email]?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

Note: we should do the same with other places that have the same problems

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.

[tsa321]

Proposal

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

Removed member when offline still appears in change approver list

What is the root cause of that problem?

Here:

App/src/pages/ReportAddApproverPage.tsx

Line 64 in 3a9430e

const isPendingDelete = employeeList?.[accountID]?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

We try to retrieve an employee by accountID, but in Onyx employees are mapped by email; therefore, the isPendingDelete check will be incorrect.

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

In here :

App/src/pages/ReportAddApproverPage.tsx

Line 54 in 3a9430e

const policyMemberEmailsToAccountIDs = getMemberAccountIDsForWorkspace(employeeList, true, false);

We already filter out employees with pendingAction = delete and those without an email (need to test more on email but I believe the intend of the getMemberAccountIDsForWorkspace to filter it too).
Therefore, we don't need to check isPendingDelete again.

We could simplify the allApprovers code to be:

const policyMemberEmailsToAccountIDs = getMemberAccountIDsForWorkspace(employeeList, true, false);
return Object.entries(policyMemberEmailsToAccountIDs)
    .filter(([_, id]): SelectionListApprover | null => {
        const accountID = Number(id ?? CONST.DEFAULT_NUMBER_ID);
        if (report.managerID === accountID || !isAllowedToApproveExpenseReport(report, accountID, policy)) {
            return false;
        }
        return true
    }).map(([email, id]) => {
        const accountID = Number(id ?? CONST.DEFAULT_NUMBER_ID);
        const employee = employeeList?.[email]
        const {avatar} = personalDetails?.[accountID] ?? {};
        const displayName = getDisplayNameForParticipant({accountID, personalDetailsData: personalDetails, formatPhoneNumber});
        const isAdmin = employee?.role === CONST.REPORT.ROLE.ADMIN;
        return {
            text: displayName,
            alternateText: email,
            keyForList: email,
            isSelected: selectedApproverEmail === email,
            login: email,
            value: accountID,
            icons: [{source: avatar ?? icons.FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: displayName, id: accountID}],
            rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
        };
    });

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

[melvin-bot]

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

[parasharrajat]

@ShridharGoel's proposal looks good to me. As a suggestion, do not post code snippets in your proposal. You need to explain each step separately and only include the necessary code.

🎀 👀 🎀 C+ reviewed