[$250] mWeb - Selector - User lands on the same WS when double tapping on different one on selector

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.53-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: https://expensify.testrail.io/index.php?/tests/view/5122323&group_by=cases:section_id&group_order=asc&group_id=296775
Issue reported by: Applause Internal Team

Action Performed:

1. Open the staging.new.expensify.com website.
2. Tap on Workspace selector on the top left corner.
3. Change to any workspace on the list.
4. Double tap on Expensify option.
5. Verify that all the chats are displayed in LHN.
6. Open Workspace selector again.
7. Double tap on the next workspace to the one selected.
8. Verify that the chats of the selected workspace are displayed.

Expected Result:

LHN should display the selected workspace chats when the user double taps over it in selector.

Actual Result:

User remains on the same workspace when trying to select "Expensify" option or next workspace on the selector list with double tapping.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6643981_1729740526844.Selector_WS.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021849976484014852041
• Upwork Job ID: 1849976484014852041
• Last Price Increase: 2024-10-26

Issue Owner

Current Issue Owner: @s77rt

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@stephanieelliott FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[nyomanjyotisa]

Proposal

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

Selector - User lands on the same WS when double tapping on different one on selector

What is the root cause of that problem?

On double click, only Navigation.goBack() executed on the second click, and the Navigation.navigateWithSwitchPolicyID({policyID}) not executed since policyID !== activeWorkspaceID is true on second click

App/src/pages/WorkspaceSwitcherPage/index.tsx

Lines 85 to 100 in 09f19c3

	const selectPolicy = useCallback(
	(option?: WorkspaceListItem) => {
	if (!option) {
	return;
	}
	const {policyID} = option;
	setActiveWorkspaceID(policyID);
	Navigation.goBack();
	if (policyID !== activeWorkspaceID) {
	Navigation.navigateWithSwitchPolicyID({policyID});
	}
	},
	[activeWorkspaceID, setActiveWorkspaceID],
	);

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

Implement debouncing to prevent double click

    const selectPolicy = useCallback(
        debounce((option?: WorkspaceListItem) => {
            console.log("set policy")

            if (!option) {
                return;
            }

            const {policyID} = option;

            setActiveWorkspaceID(policyID);
            Navigation.goBack();
            if (policyID !== activeWorkspaceID) {
                Navigation.navigateWithSwitchPolicyID({policyID});
            }
        }, 300),
        [activeWorkspaceID, setActiveWorkspaceID],
    );

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal


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

mWeb - Selector - User lands on the same WS when double tapping on different one on selector

What is the root cause of that problem?

• Double navigation is happening because the Navigation.goBack(); & Navigation.navigateWithSwitchPolicyID({policyID}); is called twice when double clicking.
  

  App/src/pages/WorkspaceSwitcherPage/index.tsx

  Lines 85 to 100 in 81e877a

  	const selectPolicy = useCallback(
  	(option?: WorkspaceListItem) => {
  	if (!option) {
  	return;
  	}
  	const {policyID} = option;
  	setActiveWorkspaceID(policyID);
  	Navigation.goBack();
  	if (policyID !== activeWorkspaceID) {
  	Navigation.navigateWithSwitchPolicyID({policyID});
  	}
  	},
  	[activeWorkspaceID, setActiveWorkspaceID],
  	);

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


• We can use useIsFocused hook to check if the screen is focused or not and if the screen is not focused we will return early from selectPolicy .

    const isFocused = useIsFocused();

    const selectPolicy = useCallback(
        (option?: WorkspaceListItem) => {
            if (!option || !isFocused) {
                return;
            }

            const {policyID} = option;

            setActiveWorkspaceID(policyID);
            Navigation.goBack();
            if (policyID !== activeWorkspaceID) {
                Navigation.navigateWithSwitchPolicyID({policyID});
            }
        },
        [activeWorkspaceID, setActiveWorkspaceID, isFocused],

What alternative solutions did you explore? (Optional)

Result

[melvin-bot]

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

[melvin-bot]

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

[s77rt]

@nyomanjyotisa Thanks for the proposal. Do you know why this happens on mWeb Chrome only?

[s77rt]

@Krishna2323 Thanks for the proposal. Same question ^ any idea why this does not happen on other platforms?