[$250] Incorrect behavior when clicking on the member to uncheck the checkbox

[m-natarajan]

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.30-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dukenv0307
Slack conversation (hyperlinked to channel name): #expensify-bugs

Action Performed:

1. On the small screen, create a workspace and invite a user.
2. On the Member page, select the user you just invited.
3. Click outside the checkbox of that item.

Expected Result:

The selection should be removed as it is on other pages (Category, Tag, Tax).

Actual Result:

We are navigated to the Member Details page instead.

Workaround:

unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Recording.1148.mp4

Screen.Recording.2025-04-19.at.11.12.52.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021914845035463204522
• Upwork Job ID: 1914845035463204522
• Last Price Increase: 2025-04-23
• Automatic offers:
• ChavdaSachin | Contributor | 107054076

Issue Owner

Current Issue Owner: @Pujan92

[melvin-bot]

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

[m-natarajan]

Proposal from @dukenv0307

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

The selection should be removed

What is the root cause of that problem?

We always navigate to profile page or member details page when selecting a row

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 352 to 362 in 8ed9c09

	const openMemberDetails = useCallback(
	(item: MemberOption) => {
	if (!isPolicyAdmin || !isPaidGroupPolicy(policy)) {
	Navigation.navigate(ROUTES.PROFILE.getRoute(item.accountID));
	return;
	}
	clearWorkspaceOwnerChangeFlow(policyID);
	Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(route.params.policyID, item.accountID));
	},
	[isPolicyAdmin, policy, policyID, route.params.policyID],
	);

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 739 in 8ed9c09

onSelectRow={openMemberDetails}

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

Base on this comment the expeceted is expected "On mobile, if you're in selection mode you should be able to tap anywhere to select the row."

We should add the new condition to check isSmallScreenWidth and selectionMode?.isEnabled like we did with categories page here

    if (isSmallScreenWidth && selectionMode?.isEnabled) {
        toggleUser(item.accountID);
        return;
    }

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 352 to 362 in 8ed9c09

	const openMemberDetails = useCallback(
	(item: MemberOption) => {
	if (!isPolicyAdmin || !isPaidGroupPolicy(policy)) {
	Navigation.navigate(ROUTES.PROFILE.getRoute(item.accountID));
	return;
	}
	clearWorkspaceOwnerChangeFlow(policyID);
	Navigation.navigate(ROUTES.WORKSPACE_MEMBER_DETAILS.getRoute(route.params.policyID, item.accountID));
	},
	[isPolicyAdmin, policy, policyID, route.params.policyID],
	);

Notice that we can also see that this bug also happens with distance rates page, report fields page,... we should also fix it in this issue.

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)

[ChavdaSachin]

Proposal

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

Incorrect behavior when clicking on the member to uncheck the checkbox

What is the root cause of that problem?

There are two bugs currently based on this comment - #49322 (comment)

1. On big screens - when user selects a few items and click on the item then item should open in RHP and upon dismissing the RHP - selection should be sustained. which is cleared in case of workspace members page.
2. On small screen - when selection mode is enabled, selecting a row should toggle item selection and not navigate to member details page.

Logic is missing to conditionally toggle/navigate to item here. And hence on selecting row user is directly navigated to member details page irrespective of device and whether selection mode is enabled.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 739 in 8ed9c09

onSelectRow={openMemberDetails}

Both of these issues are present on few more pages including

• src/pages/RoomMembersPage.tsx
• src/pages/workspace/tags/WorkspaceViewTagsPage.tsx
• src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
• src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

these bugs also are present on Serach/Reports page but those are already being taken care of. see reference

Additionally find all other pages with the same bugs.

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

For bug 1.
We already have developed a hook useCleanupSelectedOptions which takes care of persistence of selection when opening the item in RHP like categories page.
So use the same hook as follows on the workspace members page.

    const cleanupSelectedMembers = useCallback(() => setSelectedEmployees([]),[]);
    useCleanupSelectedOptions(cleanupSelectedMembers);

And remove this code block from useEffect, so it does not clear the selection upon focus change.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 182 to 185 in 8ed9c09

	if (!isFocused) {
	setSelectedEmployees([]);
	return;
	}

For bug 2.
create a new function toggleOrNavigate which would toggle the selection in case of small device and selection mode is enabled and open member details in all other cases.

    const toggleOrNavigate = (item: MemberOption) => {
        if(isSmallScreenWidth && selectionMode?.isEnabled){
            toggleUser(item.accountID);
            return;
        }
        openMemberDetails(item);
    }

and pass toggleOrNavigate instead of openMemberDetails here.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 739 in 8ed9c09

onSelectRow={openMemberDetails}

And apply similar solution to all other pages mentioned in RCA.

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

NA

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

[melvin-bot]

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

[alexpensify]

@Pujan92, when you get a chance, can you review these proposals? Thanks!