[$250] Workspace - Selected members are deselected after refreshing the Confirm details page

[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.2.62-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://test-management.browserstack.com/projects/2219752/folder/13177080/test-cases/41237944
Email or phone of affected tester (no customers): agexptest+pr211125.2@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Go to any workspace settings > Members > Invite member
3. Invite several members > Next
4. Refresh the page
5. Tap on the back arrow at the top left

Expected Result:

The member list keeps the selected users at step 3

Actual Result:

The selected users have been deselected

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

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

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug7010433_1763754553145.TC-4545_fail.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021993011839359033982
• Upwork Job ID: 1993011839359033982
• Last Price Increase: 2025-12-01

Issue Owner

Current Issue Owner: @chuckdries

[melvin-bot]

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

[abbasifaizan70]

Proposal: Fix Workspace Member Selection Persistence After Page Refresh

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

When inviting members to a workspace, if a user selects several members and clicks "Next" to proceed to the message page, then refreshes the page (F5 or Cmd+R), and finally clicks the back arrow to return to the member selection page, all previously selected members are deselected. This causes users to lose their selections and forces them to re-select members, creating a frustrating user experience.

What is the root cause of that problem?

The WorkspaceInvitePage component uses the useSearchSelector hook to manage selected members. When users click "Next", the selected members ARE saved to Onyx draft storage using setWorkspaceInviteMembersDraft() at line 151 of the file:

setWorkspaceInviteMembersDraft(route.params.policyID, invitedEmailsToAccountIDs);

The draft is stored at: ${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${policyID}

However, the problem is that when navigating back to the invite page after a refresh, the useSearchSelector hook is not initialized with this draft data.

The hook call (lines 92-101) doesn't pass the initialSelected parameter:

const {...} = useSearchSelector({
    selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_MULTI,
    searchContext: CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_MEMBER_INVITE,
    includeUserToInvite: true,
    excludeLogins: excludedUsers,
    includeRecentReports: false,
    shouldInitialize: didScreenTransitionEnd,
    // ❌ Missing: initialSelected parameter
});

The useSearchSelector hook DOES support an initialSelected parameter (as seen in App/src/hooks/useSearchSelector.base.ts at line 139), but it's not being utilized. This causes the hook to initialize with an empty selection array instead of restoring the draft data.

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

We need to restore the selected members from the draft storage when the component initializes. This requires four changes to WorkspaceInvitePage.tsx:

Change 1: Import the helper function

File: App/src/pages/workspace/WorkspaceInvitePage.tsx (Line 25)

Add getParticipantsOption to the imports from OptionsListUtils to properly create OptionData objects with full user details (name, avatar, etc.).

From:

import {getHeaderMessage} from '@libs/OptionsListUtils';

To:

import {getHeaderMessage, getParticipantsOption} from '@libs/OptionsListUtils';

Change 2: Read draft data and personal details from Onyx

File: App/src/pages/workspace/WorkspaceInvitePage.tsx (Lines 53-54)

Add two useOnyx hooks to read:

1. The draft of invited member IDs
2. Personal details for enriching the user data

Add after line 52:

const [invitedEmailsToAccountIDsDraft] = useOnyx(
    `${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID}`,
    {canBeMissing: true}
);
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);

Change 3: Convert draft data to OptionData format

File: App/src/pages/workspace/WorkspaceInvitePage.tsx (Lines 79-95)

Add a useMemo hook that converts the draft data (login -> accountID mappings) into proper OptionData objects with full user details.

Add before the useSearchSelector hook (around line 79):

const initiallySelectedOptions = useMemo(() => {
    if (!invitedEmailsToAccountIDsDraft || !personalDetails) {
        return [];
    }

    // Convert InvitedEmailsToAccountIDs to OptionData[]
    // The draft stores login -> accountID mappings
    // Use getParticipantsOption to enrich with full user details
    return Object.entries(invitedEmailsToAccountIDsDraft).map(([login, accountID]) => {
        const participant = {
            login,
            accountID,
            selected: true,
        };
        return getParticipantsOption(participant, personalDetails) as OptionData;
    });
}, [invitedEmailsToAccountIDsDraft, personalDetails]);

This uses the getParticipantsOption helper function which enriches the minimal participant data with:

• Display name (text field)
• Avatar icons
• First/Last name
• Phone number
• All other fields needed for proper UI rendering

Change 4: Pass initial selections to useSearchSelector

File: App/src/pages/workspace/WorkspaceInvitePage.tsx (Line 100)

Update the useSearchSelector hook call to include the initialSelected parameter.

From:

const {...} = useSearchSelector({
    selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_MULTI,
    searchContext: CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_MEMBER_INVITE,
    includeUserToInvite: true,
    excludeLogins: excludedUsers,
    includeRecentReports: false,
    shouldInitialize: didScreenTransitionEnd,
});

To:

const {...} = useSearchSelector({
    selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_MULTI,
    searchContext: CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_MEMBER_INVITE,
    includeUserToInvite: true,
    excludeLogins: excludedUsers,
    includeRecentReports: false,
    shouldInitialize: didScreenTransitionEnd,
    initialSelected: initiallySelectedOptions,
});

What alternative solutions did you explore?

N/A

Demo Video

Screen.Recording.2025-11-22.at.3.39.53.AM.mov

[nyomanjyotisa]

Proposal

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

Workspace - Selected members are deselected after refreshing the Confirm details page

What is the root cause of that problem?

When navigating from the member selection page to the confirm details page, selected members are saved to WORKSPACE_INVITE_MEMBERS_DRAFT in Onyx. However, when the user refreshes the confirm details page and navigates back, WorkspaceInvitePage remounts but doesn't restore the selection from the draft. The useSearchSelector hook initializes with an empty selection array

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 77 to 85 in 3844fbc

	const {searchTerm, setSearchTerm, availableOptions, selectedOptions, selectedOptionsForDisplay, toggleSelection, areOptionsInitialized, onListEndReached, searchOptions} =
	useSearchSelector({
	selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_MULTI,
	searchContext: CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_MEMBER_INVITE,
	includeUserToInvite: true,
	excludeLogins: excludedUsers,
	includeRecentReports: false,
	shouldInitialize: didScreenTransitionEnd,
	});

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

Add a useEffect in WorkspaceInvitePage to restore selected members from invitedEmailsToAccountIDsDraft when the component mounts and options are initialized

    const [invitedEmailsToAccountIDsDraft] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID}`, {canBeMissing: true});
    ...
    const {searchTerm, setSearchTerm, availableOptions, selectedOptions, selectedOptionsForDisplay, toggleSelection, areOptionsInitialized, onListEndReached, searchOptions, setSelectedOptions} =
        useSearchSelector({
        ...

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 77 to 85 in 3844fbc

	const {searchTerm, setSearchTerm, availableOptions, selectedOptions, selectedOptionsForDisplay, toggleSelection, areOptionsInitialized, onListEndReached, searchOptions} =
	useSearchSelector({
	selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_MULTI,
	searchContext: CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_MEMBER_INVITE,
	includeUserToInvite: true,
	excludeLogins: excludedUsers,
	includeRecentReports: false,
	shouldInitialize: didScreenTransitionEnd,
	});

    useEffect(() => {
        if (!areOptionsInitialized || !invitedEmailsToAccountIDsDraft || isEmptyObject(invitedEmailsToAccountIDsDraft)) {
            return;
        }

        if (selectedOptions.length > 0) {
            return;
        }

        const restoredOptions: OptionData[] = [];
        const draftEmails = Object.keys(invitedEmailsToAccountIDsDraft);

        for (const email of draftEmails) {
            const accountID = invitedEmailsToAccountIDsDraft[email];
            let option: OptionData | undefined = searchOptions.personalDetails.find((opt) => opt.login === email || opt.accountID === accountID);

            if (!option) {
                option = searchOptions.recentReports.find((opt) => opt.login === email || opt.accountID === accountID);
            }

            if (!option && searchOptions.userToInvite?.login === email) {
                option = searchOptions.userToInvite;
            }

            if (!option) {
                const userToInviteOption = getUserToInviteOption({
                    searchValue: email,
                    loginsToExclude: excludedUsers,
                    selectedOptions: restoredOptions,
                    countryCode,
                });
                option = userToInviteOption ?? undefined;
            }

            if (option) {
                restoredOptions.push({...option, isSelected: true});
            }
        }

        if (restoredOptions.length > 0) {
            setSelectedOptions(restoredOptions);
        }
    }, [areOptionsInitialized, invitedEmailsToAccountIDsDraft, searchOptions.personalDetails, searchOptions.recentReports, searchOptions.userToInvite, excludedUsers, countryCode, setSelectedOptions, selectedOptions.length]);

What alternative solutions did you explore? (Optional)

None

[abbasifaizan70]

Demo video on mobile browser

Proposal Link

Screen.Recording.2025-11-22.at.4.01.18.AM.mov

[bernhardoj]

Proposal

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

Previously selected members are unselected after refresh.

What is the root cause of that problem?

Previously, we have a logic to re-select the previously selected member, but it was removed in #73908.

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

We just need to re-add the logic back adjusted with the new hook usage.

useEffect(() => {
    // We only want to add the saved selected user on first render
    if (!areOptionsInitialized || !firstRenderRef.current) {
        return;
    }

    firstRenderRef.current = false;
    const detailsMap = availableOptions.personalDetails.reduce((prev, current) => {
        if (current.login) {
            prev[current.login] = current;
        }

        return prev;
    }, {} as Record<string, OptionData>);

    const newSelectedOptions: OptionData[] = [];
    Object.keys(invitedEmailsToAccountIDsDraft ?? {}).forEach((login) => {
        if (login in detailsMap) {
            newSelectedOptions.push({...detailsMap[login], isSelected: true});
        } else {
            const optimisticOption = getUserToInviteOption({searchValue: login});
            if (optimisticOption) {
                newSelectedOptions.push({...optimisticOption, isSelected: true});
            }
        }
    });

    if (newSelectedOptions.length > 0) {
        setSelectedOptions([...selectedOptions, ...newSelectedOptions]);
    }
}, [areOptionsInitialized]);

[melvin-bot]

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

[melvin-bot]

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