[HOLD for payment 2024-11-07] [HOLD for payment 2024-10-30] [$125.00] Workspace -Previous invite message reappears after clearing the field and entering a character

[lanitochka17]

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.42-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: N/A
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app
2. Go to workspace settings > Members
3. Click Invite member
4. Select a member and proceed to invite message page
5. Clear the invite message field
6. Enter a character

Expected Result:

The previous invitation message will not appear after clearing the field and entering a character

Actual Result:

The previous invitation message reappears after clearing the field and entering a character

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6620980_1727778413019.ScreenRecording_10-01-2024_18-21-38_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021842313701781491251
• Upwork Job ID: 1842313701781491251
• Last Price Increase: 2024-10-04

Issue Owner

Current Issue Owner: @adelekennedy

[melvin-bot]

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

[lanitochka17]

@adelekennedy 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

[lanitochka17]

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

[nyomanjyotisa]

Proposal

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

Workspace -Previous invite message reappears after clearing the field and entering a character

What is the root cause of that problem?

The root cause of this problem stems from the interaction between the defaultValue and value props. The defaultValue prop is used to set the initial value of the input. While this works for the first load of the component, it introduces an issue when the user clears the input and entering a character on android

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 192 to 193 in 2c07b39

	defaultValue={getDefaultWelcomeNote()}
	value={welcomeNote}

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

We should either remove the defaultValue or value props, and use only one of it

What alternative solutions did you explore? (Optional)

[kushu7]

Edited by proposal-police: This proposal was edited at 2024-10-01 14:39:43 UTC.

Proposal

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

Previous invite message reappears after clearing the field due to re-render

What is the root cause of that problem?

It is happening because we have workspaceInviteMessageDraft in deps array of callback function and this gets update on onChange of input.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 63 to 75 in d46f218

	const getDefaultWelcomeNote = useCallback(() => {
	return (
	// workspaceInviteMessageDraft can be an empty string
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	workspaceInviteMessageDraft ||
	// policy?.description can be an empty string
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	Parser.htmlToMarkdown(policy?.description ?? '') ||
	translate('workspace.common.welcomeNote', {
	workspaceName: policy?.name ?? '',
	})
	);
	}, [workspaceInviteMessageDraft, policy, translate]);

which is causing this useEffect to run on each render and setting back to default message as when workspaceInviteMessageDraft is empty

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 89 to 94 in d46f218

	useEffect(() => {
	if (isEmptyObject(invitedEmailsToAccountIDsDraft) || !welcomeNote) {
	return;
	}
	setWelcomeNote(getDefaultWelcomeNote());
	}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft, welcomeNote]);

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

By removing workspaceInviteMessageDraft from here will fix the issue
as we want getDefaultMessage on first render only. we can safely remove it.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 75 in d46f218

}, [workspaceInviteMessageDraft, policy, translate]);

What alternative solutions did you explore? (Optional)

None

[huult]

Edited by proposal-police: This proposal was edited at 2024-10-01 14:54:15 UTC.

Proposal

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

Invite message comes back after deleting it

What is the root cause of that problem?

Since we set getDefaultWelcomeNote as a dependency of this hook, the hook is triggered every time the input's onChange event occurs

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 94 in 12e2808

}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft, welcomeNote]);

When we remove all the text and input new text, setWelcomeNote will be triggered.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 93 in 12e2808

setWelcomeNote(getDefaultWelcomeNote());

and workspaceInviteMessageDraft is not saving completely, so it gets the default value, and this issue occurs

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 67 in 12e2808

workspaceInviteMessageDraft ||

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

We should remove getDefaultWelcomeNote from the dependency array to avoid re-renders when the input changes.

// .src/pages/workspace/WorkspaceInviteMessagePage.tsx#L94
   useEffect(() => {
-        if (isEmptyObject(invitedEmailsToAccountIDsDraft) || !welcomeNote) {
+        if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
            return;
        }
        setWelcomeNote(getDefaultWelcomeNote());
-    }, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft, welcomeNote]);
+    }, [invitedEmailsToAccountIDsDraft]);

and We need to validate this input, if necessary, to avoid empty values ("") (optional)

// .src/pages/workspace/WorkspaceInviteMessagePage.tsx#L119
        if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
            errorFields.welcomeMessage = translate('workspace.inviteMessage.inviteNoMembersError');
-        }
+        } else if (isEmptyObject(welcomeNote)) {
+            errorFields.welcomeMessage = 'Please enter a welcome note.';
        }

Details

POC

Screen.Recording.2024-10-01.at.21.25.03.mov

[bernhardoj]

Proposal

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

The default message shows briefly everytime we type in the ws invite message page.

What is the root cause of that problem?

We have this effect which updates the welcome note to the default every time the welcome note is updated.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 89 to 94 in 7f0bdf0

	useEffect(() => {
	if (isEmptyObject(invitedEmailsToAccountIDsDraft) || !welcomeNote) {
	return;
	}
	setWelcomeNote(getDefaultWelcomeNote());
	}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft, welcomeNote]);

This is added in #48660 because we migrated to useOnyx so when the component is mounted for the first time, workspaceInviteMessageDraft from Onyx is initially undefined, so getDefaultWelcomeNote will return the default message instead of the saved user draft,

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 63 to 74 in 7f0bdf0

	const getDefaultWelcomeNote = useCallback(() => {
	return (
	// workspaceInviteMessageDraft can be an empty string
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	workspaceInviteMessageDraft ||
	// policy?.description can be an empty string
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	Parser.htmlToMarkdown(policy?.description ?? '') ||
	translate('workspace.common.welcomeNote', {
	workspaceName: policy?.name ?? '',
	})
	);

and is set as the input default value.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 192 in 7f0bdf0

defaultValue={getDefaultWelcomeNote()}

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

Remove this useEffect

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 89 to 94 in 7f0bdf0

	useEffect(() => {
	if (isEmptyObject(invitedEmailsToAccountIDsDraft) || !welcomeNote) {
	return;
	}
	setWelcomeNote(getDefaultWelcomeNote());
	}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft, welcomeNote]);

and instead, to overcome the issue after migrating to useOnyx, we can re-trigger this effect when the workspaceInviteMessageDraft is loaded.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 77 to 87 in 7f0bdf0

	useEffect(() => {
	if (!isEmptyObject(invitedEmailsToAccountIDsDraft)) {
	setWelcomeNote(getDefaultWelcomeNote());
	return;
	}
	if (isEmptyObject(policy)) {
	return;
	}
	Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID), true);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);

const [workspaceInviteMessageDraft, workspaceInviteMessageDraftResult] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MESSAGE_DRAFT}${route.params.policyID.toString()}`);
const isWorkspaceInviteMessageDraftLoading = isLoadingOnyxValue(workspaceInviteMessageDraftResult);

useEffect(() => {
    if (isWorkspaceInviteMessageDraftLoading) {
        return;
    }
    if (!isEmptyObject(invitedEmailsToAccountIDsDraft)) {
        setWelcomeNote(getDefaultWelcomeNote());
        return;
    }
    if (isEmptyObject(policy)) {
        return;
    }
    Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID), true);
    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, [isWorkspaceInviteMessageDraftLoading]);

We can consider removing the defaultValue too

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 192 in 7f0bdf0

defaultValue={getDefaultWelcomeNote()}

we can optionally returning null when isWorkspaceInviteMessageDraftLoading is true

[melvin-bot]

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

[adelekennedy]

I can replicate this but it's so briefI think it's really a polish - updating price