[HOLD for payment 2024-11-20] [$250] Web - Workspace - Members are unselected when refresh Add message page and go back

[IuliiaHerets]

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.0.34-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+gm103117@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Create Workspace
2. Go to Members> Invite> Enter any email> Next
3. Refresh the Add message page
4. Go back to Invite members page

Expected Result:

Members should be selected

Actual Result:

Members are deselected

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6602434_1726237027827.Recording__3926.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836242370984040873
• Upwork Job ID: 1836242370984040873
• Last Price Increase: 2024-10-09
• Automatic offers:
• alitoshmatov | Reviewer | 104523604
• truph01 | Contributor | 104523606

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

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

@RachCHopkins 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.

Web - Workspace - Members are unselected when refresh Add message page and go back

What is the root cause of that problem?

The useEffect in here clears selected members when the component unmounts

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

Remove the following codes

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 78 to 83 in 19d037b

	useEffect(() => {
	return () => {
	Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [route.params.policyID]);

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal


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

Web - Workspace - Members are unselected when refresh Add message page and go back

What is the root cause of that problem?

• The useEffect to clear the selected participants runs on initial render because we have route.params.policyID in the dependencies.
  

  App/src/pages/workspace/WorkspaceInvitePage.tsx

  Lines 78 to 83 in d0a51b8

  	useEffect(() => {
  	return () => {
  	Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
  	};
  	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
  	}, [route.params.policyID]);

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


• We can remove route.params.policyID from the dependencies list.

What alternative solutions did you explore? (Optional)

• We can update the useEffect to only run the cleanup function when component has been already mounted for once.

    useEffect(() => {
        return () => {
            if (firstRenderRef.current) {
                return;
            }
            Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
        };
        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, [route.params.policyID]);

Result

[RachCHopkins]

Reproduced!

[melvin-bot]

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

[melvin-bot]

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