[Due for payment 2025-04-02] [$250] mWeb - Workspace - Tapping New Workspace more than once, opens several WS confirmation pages

[mitarachim]

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.9-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
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): ibellicotest+345@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome
App Component: Workspace Settings

Action Performed:

Prerequisite: At least one workspace should be already created on account.

1. Open the staging.new.expensify.com
2. Tap on "Settings" and select "Workspaces"
3. Tap on "New Workspace" button more than once.
4. When landing on "Confirm Workspace" page, tap on the arrow on the top left corner to return to workspaces list.
5. Check how many workspaces confirmation pages were opened.

Expected Result:

Only one workspace confirmation page should be opened despite tapping more than once on "New Workspace" button.

Actual Result:

Several workspace confirmation pages are opened if tapping more than once on "New Workspace" button.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6761517_1741152588965.WS_several.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021897404729148638725
• Upwork Job ID: 1897404729148638725
• Last Price Increase: 2025-03-12
• Automatic offers:
• dominictb | Reviewer | 106528962
• Krishna2323 | Contributor | 106528964

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-06 10:06:35 UTC.

Proposal

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

Several workspace confirmation pages are opened if tapping more than once on "New Workspace" button.

What is the root cause of that problem?

In Workspace List page, we don't prevent multiple click on New workspace button

App/src/pages/workspace/WorkspacesListPage.tsx

Line 426 in ad7462d

onPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute())))}

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

We can modify and use the logics added in this PR, which was implemented to fix this similar issue.

First, modify useActiveRoute to use other Navigation methods instead of only getReportRHPActiveRoute

Here's my initial pseudo code, this can be further improved if we get to the PR phase

const currentRoute = useRef('');

const getCurrentRoute = useCallback((callback: () => string) => {
        if (!currentRoute.current) {
            currentRoute.current = callback();
        }

        return currentRoute.current;
}, []);

Then use it in Workspace List page

const {getCurrentRoute} = useActiveRoute();

const getHeaderButton = () => (
        <Button
            accessibilityLabel={translate('workspace.new.newWorkspace')}
            text={translate('workspace.new.newWorkspace')}
            onPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(getCurrentRoute(Navigation.getActiveRoute))))}
            icon={Expensicons.Plus}
            style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]}
        />
    );

Then we can use this hook to fix the similar bugs in other places.

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)

Create a ref:

const isButtonPressedRef = useRef(false)

Update onPress for New workspace button

onPress={() => {
		if (isButtonPressedRef.current) {
                    return;
                }
                isButtonPressedRef.current = true;
		interceptAnonymousUser(() => {
			Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute()))
		})
	}
}

And reset isButtonPressedRef when Workspace List page gain focus

    const isFocused = useIsFocused();

    useEffect(() => {
        if (!isFocused) {
            return;
        }
        pressedRef.current = false;
    }, [isFocused]);

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.

[linhvovan29546]

Proposal

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

mWeb - Workspace - Tapping New Workspace more than once, opens several WS confirmation pages

What is the root cause of that problem?

On the web, when clicking a button, we do not handling singleExecution as we do on native, so the onPress fired multiple time.
When a button is clicked, we navigate to the target screen. However, in this case, the navigation action is triggered multiple times.

App/src/hooks/useSingleExecution/index.ts

Line 10 in 4fe7c70

export default function useSingleExecution() {

Although we have logic to prevent navigation to the same screen, in the OP, we navigate with backTo, which causes the condition to evaluate as false, leading to multiple instances of the screen opening.

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

We can use debounce to prevent multiple click

App/src/pages/workspace/WorkspacesListPage.tsx

Line 426 in ad7462d

onPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute())))}

    const debounceOnPress = useDebounce(
        (action) => action(),
        CONST.TIMING.USE_DEBOUNCED_STATE_DELAY,
        {
            leading: true, trailing: false 
        }
    );
.....
            onPress={() =>
                debounceOnPress(()=>{
                    interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute())))
                })}

Optional: We can wrap this inside Button

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

We can write a test to verify that action is only executed one time times when clicking multiple times

What alternative solutions did you explore? (Optional)

n/A

[Krishna2323]

Proposal

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

mWeb - Workspace - Tapping New Workspace more than once, opens several WS confirmation pages

What is the root cause of that problem?

• On web, we do not prevent multiple clicks. We have logic to prevent navigation to the same screen but as soon as we hit the "New workspace" button, the Navigation.getActiveRoute() and due to that the url is not identified as same.

App/src/libs/Navigation/helpers/linkTo/index.ts

Lines 102 to 105 in ad7462d

	// We don't want to dispatch action to push/replace with exactly the same route that is already focused.
	if (areNamesAndParamsEqual(currentState, stateFromPath)) {
	return;
	}

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

• Instead of passing Navigation.getActiveRoute() as backTo value, we can use ROUTES.SETTINGS_WORKSPACES.
• We should also do the same if the bug exist in other components/pages.

App/src/pages/workspace/WorkspacesListPage.tsx

Line 426 in ad7462d

onPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute())))}

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

N/A -- Navigation issue

What alternative solutions did you explore? (Optional)

• We can use isFocused to prevent navigating when screen is not focused.

            onPress={() =>
                interceptAnonymousUser(() => {
                    if (!isFocused) {
                        return;
                    }
                    Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(ROUTES.SETTINGS_WORKSPACES));
                })
            }

[huult]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-06 02:08:18 UTC.

Proposal

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

Tapping New Workspace more than once, opens several WS confirmation pages

What is the root cause of that problem?

When we tap 'New Workspace' multiple times, the navigation is triggered repeatedly, causing this issue.

App/src/pages/workspace/WorkspacesListPage.tsx

Line 426 in c3afa5f

onPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute())))}

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

This issue might occur elsewhere if reproduced with similar behavior. I haven't tested it, but I assume so. Therefore, I suggest two solutions: 1) a fix for this specific issue, and 2) a global fix.

1. A fix for this specific issue: We should call navigate only when activeRoute differs from newRoute

App/src/pages/workspace/WorkspacesListPage.tsx

Line 426 in c3afa5f

onPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(Navigation.getActiveRoute())))}

update to:

    const activeRoute = Navigation.getActiveRoute();
    const newRoute = ROUTES.WORKSPACE_CONFIRMATION.getRoute(activeRoute);
    const extractBaseRoute = (route: string) => route.split('?').at(0);

    // or
    // const removeBacktoParam = (r: string) => r.replace(/([&?])backTo=[^&]+(&|$)/, (match, p1, p2) => (p1 === '?' && !p2 ? '' : p1));

    // if (removeBacktoParam(activeRoute) === removeBacktoParam(`/${newRoute}`)) {

    if (extractBaseRoute(activeRoute) === extractBaseRoute(`/${newRoute}`)) {
        return;
    }

    Navigation.navigate(newRoute);

Screen.Recording.2025-03-05.at.16.05.28.mov

2. Global fix: We apply the same approach by checking if newRoute differs from activeRoute. If they are different, we allow navigation; otherwise, navigation is not needed (optional)

App/src/libs/Navigation/Navigation.ts

Line 159 in 44dbdc1

if (!canNavigate('navigate', {route})) {

add:

    const activeRoute = getActiveRoute();

    const removeBacktoParam = (r: string) => r.replace(/([&?])backTo=[^&]+(&|$)/, (match, p1, p2) => (p1 === '?' && !p2 ? '' : p1));

    if (removeBacktoParam(activeRoute) === removeBacktoParam(`/${route}`)) {
        return;
    }

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)

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

[melvin-bot]

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