[$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 [email protected] 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: @ChavdaSachin

[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!

[Pujan92]

I am inclined more towards @ChavdaSachin's proposal as it also fixes the selection persistence issue(which is connected) as mentioned in the #49322 (comment).

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @srikarparsi, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[ChavdaSachin]

I would raise the PR within 48 hours

[melvin-bot]

📣 @ChavdaSachin 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

@srikarparsi Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ChavdaSachin]

PR is not yet raised due to this blocker - #60977

[alexpensify]

@ChavdaSachin should we put this one on hold to wait for that one?

[ChavdaSachin]

That would be great

[melvin-bot]

@ChavdaSachin Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ChavdaSachin]

Holding issue is solved, working on this ASAP.

[dukenv0307]

@Pujan92 @srikarparsi Just to clarify:

The additional bug (bug 1) included in the selected proposal isn’t fully related to the original issue and has already been fixed in this PR: #59648.

For bug 2, the proposed solution is exactly the same as mine - which I submitted earlier.

Given that my proposal came first and directly targets the original issue. I believe I should be considered eligible to be assigned to this issue. Could you please check again?

[melvin-bot]

@ChavdaSachin Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@ChavdaSachin Eep! 4 days overdue now. Issues have feelings too...

[ChavdaSachin]

Waiting on this regression issue to be solved - #61633

[alexpensify]

@ChavdaSachin - I see the PR is in draft mode. Any update on when we can get this one moving forward? Thanks!

[ChavdaSachin]

@alexpensify there were some major changes on how selection mode works on the pages being fixed for current issue.
And selection mode is not yet working as expected and hence the PR is stuck on draft stage.

Hopefully there would be no blockers after #61633

And as soon as blockers are resolved I could complete the work on the same day.

[alexpensify]

Thanks for the update! Moving to Weekly while we wait for #61633

[ChavdaSachin]

PR ready for review.
cc. @alexpensify @Pujan92 @srikarparsi

[dukenv0307]

@Pujan92 @srikarparsi What do you think about my comment above?

[Pujan92]

@dukenv0307 As I mentioned earlier, it seems both issues are connected as per the referenced comment in both proposals. Based on that, we chose the @ChavdaSachin's proposal. The persistence issue is resolved after the evaluation and selection of the contributor. So I think its fair to proceed with @ChavdaSachin here.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[alexpensify]

@Pujan92 and @ChavdaSachin - I believe you are working in the PR to resolve the blocker? Is that correct?

[ChavdaSachin]

Yes

[Pujan92]

@ChavdaSachin our PR has been reverted. So let's not hurry and raise a new PR with testing all scenarios.

cc: @alexpensify

[ChavdaSachin]

Great