[Due for payment 2025-05-20] [$250] iOS - Workspace - Unable to delete workspace, app freezes after tapping Delete workspace

[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.1.33-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): dhidjdjdkd@gmail.com
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.4
App Component: Workspace Settings

Action Performed:

1. Launch Expensify app.
2. Log in with a new Gmail account.
3. Select Something else during onboarding and complete the flow.
4. Go to Account > Workspaces.
5. Create a new workspace.
6. Tap app back button to return to workspace list.
7. Tap 3-dot menu.
8. Tap Delete workspace.

Expected Result:

Confirmation modal to delete workspace will show up.

Actual Result:

Confirmation modal to delete workspace does not show up.
After tapping Delete workspace, tapping any button on the same page is not responsive.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021917225435968213171
• Upwork Job ID: 1917225435968213171
• Last Price Increase: 2025-05-06
• Automatic offers:
• daledah | Contributor | 107203490

Issue Owner

Current Issue Owner: @maddylewis

[melvin-bot]

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

[daledah]

Proposal

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

Confirmation modal to delete workspace does not show up.
After tapping Delete workspace, tapping any button on the same page is not responsive.

What is the root cause of that problem?

When pressing "Delete workspace", we open the Delete modal immediately without waiting for the popover menu to close. This behaviour creates a race condition where the modal Onyx values are all set to false when popover menu closes, but Delete modal still opens

So on screen, the Delete modal is not shown but the invisible overlay still exists, blocking user from interacting with any other components under.

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

We should close the popover menu before opening delete modal

App/src/hooks/usePayAndDowngrade.ts

Line 22 in d391099

setIsDeleteModalOpen(true);

            close(() => {
                setIsDeleteModalOpen(true);
            });

Screen.Recording.2025-04-29.at.19.01.12.mov

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

It's a modal race condition so I don't think we need a test

What alternative solutions did you explore? (Optional)

NA

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.

[bernhardoj]

Proposal

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

Can't delete workspace.

What is the root cause of that problem?

When we try to delete a workspace and shouldCalculateBillNewDot is true, it will calculate the bill first

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 217 to 241 in d391099

	onSelected: () => {
	if (loadingSpinnerIconIndex !== null) {
	return;
	}
	if (isSupportalAction) {
	setIsSupportalActionRestrictedModalOpen(true);
	return;
	}
	setPolicyIDToDelete(item.policyID);
	setPolicyNameToDelete(item.title);
	if (shouldCalculateBillNewDot) {
	setIsDeletingPaidWorkspace(true);
	calculateBillNewDot();
	setLoadingSpinnerIconIndex(index);
	return;
	}
	setIsDeleteModalOpen(true);
	},
	shouldKeepModalOpen: shouldCalculateBillNewDot,
	shouldCallAfterModalHide: !shouldCalculateBillNewDot,
	});

Only after the calculate bill completes, we close the current modal,

App/src/pages/workspace/WorkspacesListRow.tsx

Lines 134 to 144 in d391099

	useEffect(() => {
	if (isLoadingBill) {
	return;
	}
	resetLoadingSpinnerIconIndex?.();
	if (!threeDotsMenuRef.current?.isPopupMenuVisible) {
	return;
	}
	threeDotsMenuRef?.current?.hidePopoverMenu();
	}, [isLoadingBill, resetLoadingSpinnerIconIndex]);

and then show the delete confirm modal.

App/src/hooks/usePayAndDowngrade.ts

Lines 16 to 22 in d391099

	useEffect(() => {
	if (!isDeletingPaidWorkspaceRef.current || isLoadingBill) {
	return;
	}
	if (!shouldBillWhenDowngrading) {
	setIsDeleteModalOpen(true);

However, on iOS, if we want to show a modal from another modal, we need to wait for the previous modal to close first. That's why we have the shouldCallAfterModalHide. We set it to false if shouldCalculateBillNewDot is true, because we don't want to close the modal yet until the calculation is complete.

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

To fix this, after completing the calculation, we need to close the previous modal first using Modal.close.

We can add it into usePayAndDowngrade hook.

close(() => setIsDeleteModalOpen(true));

We can optionally do it using a props because usePayAndDowngrade is used in overview page too which doesn't need it.

Or to make it cleaner, we can update the setIsDeleteModalOpen props to be a calculate complete callback, but doesn't need pay when downgrading. So, we can use it like:

const showDeleteModal = useCallback(() => {
    close(() => setIsDeleteModalOpen(true));
}, []);
const {...} = usePayAndDowngrade(showDeleteModal);

Then, we can remove the modal hide from here.

App/src/pages/workspace/WorkspacesListRow.tsx

Lines 134 to 144 in d391099

	useEffect(() => {
	if (isLoadingBill) {
	return;
	}
	resetLoadingSpinnerIconIndex?.();
	if (!threeDotsMenuRef.current?.isPopupMenuVisible) {
	return;
	}
	threeDotsMenuRef?.current?.hidePopoverMenu();
	}, [isLoadingBill, resetLoadingSpinnerIconIndex]);

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

N/A

[github-actions]

⚠️ @bernhardoj Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021917225435968213171

[melvin-bot]

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

[melvin-bot]

@shubham1206agra Huh... This is 4 days overdue. Who can take care of this?