[HOLD #77425][$250] Chat - Approver is shown on 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.61-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: N/A
Email or phone of affected tester (no customers): gibethlehem@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Login to an account and Create a workspace with an employee
2. Create an expenses on the workspace chat
3. Submit the expense
4. Go to more > Change Approver
5. Click on Add Approver > Change Approver (Update if necessary)
6. Select approver and Save
7. Go to workspace > members > Try to remove the approver in step 5
8. With out dismissing the error go to The expense
9. Go to more > Change Approver > Click on Add Approver

Expected Result:

Approver is not listed on the Add approver page

Actual Result:

Approver is listed on the Add approver page

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

Bug7008566_1763575444345.Screen_Recording_2025-11-18_at_2.38.34_at_night.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

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

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

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

[Eskalifer1]

🚨 Edited by proposal-police: This proposal was edited at 2025-12-09 13:35:42 UTC.

Proposal

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

Chat - Approver is shown on Add Approver list

What is the root cause of that problem?

Here we get allApprovers:

App/src/pages/ReportAddApproverPage.tsx

Lines 47 to 83 in be1e9e7

	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});
	return {
	text: displayName,
	alternateText: email,
	keyForList: email,
	isSelected: selectedApproverEmail === email,
	login: email,
	value: accountID,
	icons: [{source: avatar ?? FallbackAvatar, type: CONST.ICON_TYPE_AVATAR, name: displayName, id: accountID}],
	rightElement: isAdmin ? <Badge text={translate('common.admin')} /> : undefined,
	};
	})
	.filter((approver): approver is SelectionListApprover => !!approver);
	}, [employeeList, report, policy, personalDetails, selectedApproverEmail, translate]);

But in this case firs account have pendingAction === "delete" since we didn’t dismiss the error

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

We should filter employees with pending action delete:

Object.values(employeeList)
            .filter((employee) => employee?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE)

We actually already have this logic:

App/src/pages/ReportAddApproverPage.tsx

Line 62 in be1e9e7

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

But this function has 3rd parametr as false so pending delete members is not included:

App/src/pages/ReportAddApproverPage.tsx

Line 52 in be1e9e7

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

So we can just pass true:

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

What alternative solutions did you explore? (Optional)

We have preserve pendingAction here:

App/src/libs/actions/Policy/Member.ts

Line 412 in 623dd38

pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,

So we get this user in the list. We added this because we have this logic of dismiss error:
This means that if there is no pendingAction === ‘delete’, then it is assumed that we are adding the user, not clearing them, which results in us removing them from Onyx completely:

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 336 to 348 in 51f9373

	/**
	* Dismisses the errors on one item
	*/
	const dismissError = useCallback(
	(item: MemberOption) => {
	if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
	clearDeleteMemberError(route.params.policyID, item.login);
	} else {
	clearAddMemberError(route.params.policyID, item.login, item.accountID);
	}
	},
	[route.params.policyID],
	);

We can add a check for this specific case so that when this error occurs, we execute clearDeleteMemberError:

            const errors = getLatestErrorMessageField(item);
            const errorEntries = Object.entries(errors ?? {});
            const errorMessages = mapValues(Object.fromEntries(errorEntries), (error) => error);
            const hasApproverError = Object.values(errorMessages).some(
                (error) =>
                    error ===
                    translate(‘workspace.people.removeMemberPromptPendingApproval’, {
                        memberName: item.login,
                    }),
            );

if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || hasApproverError) 

And remove pendingAction when executing the request:

pendingAction: null

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.

[thelullabyy]

Proposal

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

Approver is listed on the Add approver page

What is the root cause of that problem?

We filter pending action delete with error member here

App/src/pages/ReportAddApproverPage.tsx

Lines 64 to 67 in 1afd7d6

	// Filter the current report approver and members which are pending for deletion
	if (report.managerID === accountID || isPendingDelete || !isAllowedToApproveExpenseReport(report, accountID, policy)) {
	return null;
	}

App/src/libs/PolicyUtils.ts

Lines 376 to 378 in 6abc35a

	if (member.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
	continue;
	}

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

We should not filter out pending delete member, instead we only filter out members that are pending deletion without errors (successful deletion). Members with deletion errors should still be included since the deletion failed

            if (member.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && isEmptyObject(member?.errors)) {
                continue;
            }

App/src/libs/PolicyUtils.ts

Lines 376 to 378 in 6abc35a

	if (member.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
	continue;
	}

Do similar here

App/src/pages/ReportAddApproverPage.tsx

Lines 64 to 67 in 1afd7d6

	// Filter the current report approver and members which are pending for deletion
	if (report.managerID === accountID || isPendingDelete || !isAllowedToApproveExpenseReport(report, accountID, policy)) {
	return null;
	}

Note: We can add new param includeMemberWithPendingDeleteWithError if needed

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.

[lydiabarclay]

Checking with product

[lydiabarclay]

Bumped Slack

[lydiabarclay]

Still discussing expected behavior

[lydiabarclay]

Bumped thread

[melvin-bot]

@lydiabarclay this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!