[$250] Workspace - Selected users to invite turn deselected when refresh Add message 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.1.81-4
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
Issue reported by: Applause - Internal Team

Action Performed:

1. Create workspace
2. Go to invite and select few users> Next
3. On Confirm details page refresh the page
4. Navigate back to Invite new members page

Expected Result:

Selected user should remain selected

Actual Result:

Selected users are 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

Bug6888799_1752605061021.Recording__5768.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021945439481116665917
• Upwork Job ID: 1945439481116665917
• Last Price Increase: 2025-07-16
• Automatic offers:
• QichenZhu | Reviewer | 108083420
• Krishna2323 | Contributor | 108083421

Issue Owner

Current Issue Owner: @chuckdries

[melvin-bot]

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

[samranahm]

Proposal

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

Selected users to invite turn deselected when refresh Add message page

What is the root cause of that problem?

We only check for firstRenderRef.current, but when we refresh or refresh and navigate back from the next page, the component remounts and firstRenderRef.current resets to true, which causes the selection restore logic to run again even if the user list hasn’t loaded yet.

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 121 to 130 in 1d14859

	if (firstRenderRef.current) {
	// We only want to add the saved selected user on first render
	firstRenderRef.current = false;
	Object.keys(invitedEmailsToAccountIDsDraft ?? {}).forEach((login) => {
	if (!(login in detailsMap)) {
	return;
	}
	newSelectedOptions.push({...detailsMap[login], isSelected: true});
	});
	}

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

We should explicitly check for inviteOptions.personalDetails.length > 0 include this condition as

if (firstRenderRef.current && inviteOptions.personalDetails.length > 0) {
    // We only want to add the saved selected user on first render
    firstRenderRef.current = false;

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

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.

[Krishna2323]

Proposal

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

• Workspace - Selected users to invite turn deselected when refresh Add message page

What is the root cause of that problem?

• The issue lies in the useOptionsList hook, we are using the areOptionsInitialized state from useOptionsListContext but we are managing our own state for options (internalOptions), and calling initializeOptions immediately sets areOptionsInitialized to true but our internalOptions state still remains empty.

App/src/components/OptionListContextProvider.tsx

Lines 262 to 268 in 9fcecdf

	// Hook to use the OptionsListContext with an initializer to load the options
	const useOptionsList = (options?: {shouldInitialize: boolean}) => {
	const {shouldInitialize = true} = options ?? {};
	const {initializeOptions, options: optionsList, areOptionsInitialized, resetOptions} = useOptionsListContext();
	const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: false});
	const [internalOptions, setInternalOptions] = useState<OptionList>(optionsList);
	const prevOptions = useRef<OptionList>(null);

App/src/components/OptionListContextProvider.tsx

Line 293 in 9fcecdf

initializeOptions();

App/src/components/OptionListContextProvider.tsx

Lines 234 to 237 in 9fcecdf

	const initializeOptions = useCallback(() => {
	loadOptions();
	areOptionsInitialized.current = true;
	}, [loadOptions]);

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

• Since we are managing our own state for the options, we should also create a ref to keep track of the initialization of the internalOptions state.

// Create a ref
const areInternalOptionsInitialized = useRef(areOptionsInitialized);

// set it to true after calling setInternalOptions
areInternalOptionsInitialized.current = true;

// pass the ref value as the value of areOptionsInitialized
areOptionsInitialized: areInternalOptionsInitialized?.current,

// We might also need to create `internalResetOptions` for setting `areInternalOptionsInitialized.current` to false when we reset the options.
const internalResetOptions = useCallback(() => {
    areInternalOptionsInitialized.current = false;
    resetOptions();
}, [resetOptions]);

return useMemo(
    () => ({
        initializeOptions,
        options: internalOptions,
        areOptionsInitialized: areInternalOptionsInitialized?.current,
        resetOptions: internalResetOptions,
    }),
    [initializeOptions, internalOptions, internalResetOptions],
);

• We can also use useState for managing the state for areInternalOptionsInitialized.

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

• Mock your data sources
  • Use jest.mock() to stub out useOnyx for both REPORT and REPORT_ACTIONS collections, and for IS_LOADING_APP.
  • Use jest.mock() (or a manual mock) to stub out usePersonalDetails() hook.
  • Arrange the mocks so that on the first render each returns “empty” data (e.g. {} for reports & actions, false for loading, and {} for personal details).

• Render the hook inside its provider
  • At this point, nothing has been initialized yet.

const { result, rerender } = renderHook(
  () => useOptionsList({ shouldInitialize: true }),
  { wrapper: OptionsListContextProvider },
);

• Assert the initial state

expect(result.current.options.reports).toHaveLength(0);
expect(result.current.options.personalDetails).toHaveLength(0);
expect(result.current.areOptionsInitialized).toBe(false);

• Simulate Onyx update
  • Re‑mock useOnyx hooks so that now REPORT returns a non‑empty object, and REPORT_ACTIONS stays empty.
  • Re‑mock usePersonalDetails() to return a non‑empty map.

• Trigger a rerender and let effects run
  • This causes your useEffect in the hook to call initializeOptions(), populate the context, and (in turn) update the hook’s internal state.

await act(async () => {
  rerender();
});

• Assert the post‑load state

expect(result.current.options.reports.length).toBeGreaterThan(0);
expect(result.current.options.personalDetails.length).toBeGreaterThan(0);
expect(result.current.areOptionsInitialized).toBe(true);

• (Optional) Test reset behavior

await act(() => {
  result.current.resetOptions();
});
expect(result.current.options.reports).toHaveLength(0);
expect(result.current.options.personalDetails).toHaveLength(0);
expect(result.current.areOptionsInitialized).toBe(false);

What alternative solutions did you explore? (Optional)

• We can use internalOptions state to determine if the options are initialized or not (in the hook).

const areInternalOptionsInitialized = useMemo(() => {
  return (
    internalOptions.reports.length > 0 ||
    internalOptions.personalDetails.length > 0
  );
}, [internalOptions]);

Result

useOptionsHoolIssue.mp4

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

Was able to reproduce, @QichenZhu plz review the proposals above. I'd LOVE to fix other instances of this happening with one PR, if possible.

[bernhardoj]

Proposal

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

Selected user is deselected after refresh at invite message page and go back.

What is the root cause of that problem?

We already have a logic (that only runs once) to reinitialize selected user from the invitedEmailsToAccountIDsDraft onyx data.

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 121 to 129 in 37f73fc

	if (firstRenderRef.current) {
	// We only want to add the saved selected user on first render
	firstRenderRef.current = false;
	Object.keys(invitedEmailsToAccountIDsDraft ?? {}).forEach((login) => {
	if (!(login in detailsMap)) {
	return;
	}
	newSelectedOptions.push({...detailsMap[login], isSelected: true});
	});

However, inviteOptions is empty.

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 111 to 118 in 37f73fc

	const detailsMap: Record<string, MemberForList> = {};
	inviteOptions.personalDetails.forEach((detail) => {
	if (!detail.login) {
	return;
	}
	detailsMap[detail.login] = formatMemberForList(detail);
	});

We already guard the logic by checking if areOptionsInitialized, but even though it's true, the inviteOptions is still empty.

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 101 to 104 in 37f73fc

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

Turns out areOptionsInitialized is a ref.

App/src/components/OptionListContextProvider.tsx

Line 45 in 37f73fc

const areOptionsInitialized = useRef(false);

We set it to true after calling loadOptions.

App/src/components/OptionListContextProvider.tsx

Lines 234 to 237 in 37f73fc

	const initializeOptions = useCallback(() => {
	loadOptions();
	areOptionsInitialized.current = true;
	}, [loadOptions]);

And the useEffect is somehow re-triggered (caused by inviteOptions even though it's still empty, which indicates the reference is not stable, but I'm not focusing on that issue here), and the areOptionsInitialized ref value is already true, but the options are not loaded yet and also further delayed because we set the loaded options to internalOptions state.

App/src/components/OptionListContextProvider.tsx

Lines 267 to 286 in 37f73fc

	const [internalOptions, setInternalOptions] = useState<OptionList>(optionsList);
	const prevOptions = useRef<OptionList>(null);
	useEffect(() => {
	if (!prevOptions.current) {
	prevOptions.current = optionsList;
	setInternalOptions(optionsList);
	return;
	}
	/**
	* optionsList reference can change multiple times even the value of its arrays is the same. We perform shallow comparison to check if the options have truly changed.
	* This is necessary to avoid unnecessary re-renders in components that use this context.
	*/
	const areOptionsEqual = shallowOptionsListCompare(prevOptions.current, optionsList);
	prevOptions.current = optionsList;
	if (areOptionsEqual) {
	return;
	}
	setInternalOptions(optionsList);
	}, [optionsList]);

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

First, convert areOptionsInitialized into a state. Then, remove setting the areOptionsInitialized to true here.

App/src/components/OptionListContextProvider.tsx

Lines 234 to 237 in 37f73fc

	const initializeOptions = useCallback(() => {
	loadOptions();
	areOptionsInitialized.current = true;
	}, [loadOptions]);

Next, pass setAreOptionsInitialized to the context value and also add areOptionsInitialized to the memo deps.

App/src/components/OptionListContextProvider.tsx

Lines 252 to 254 in 37f73fc

	<OptionsListContext.Provider // eslint-disable-next-line react-compiler/react-compiler
	value={useMemo(() => ({options, initializeOptions, areOptionsInitialized: areOptionsInitialized.current, resetOptions}), [options, initializeOptions, resetOptions])}
	>

Last, set areOptionsInitialized to true before doing the shallow compare. This is to make sure areOptionsInitialized is set to true even when the options are updated with an empty result (because it's empty)

App/src/components/OptionListContextProvider.tsx

Lines 270 to 286 in 37f73fc

	useEffect(() => {
	if (!prevOptions.current) {
	prevOptions.current = optionsList;
	setInternalOptions(optionsList);
	return;
	}
	/**
	* optionsList reference can change multiple times even the value of its arrays is the same. We perform shallow comparison to check if the options have truly changed.
	* This is necessary to avoid unnecessary re-renders in components that use this context.
	*/
	const areOptionsEqual = shallowOptionsListCompare(prevOptions.current, optionsList);
	prevOptions.current = optionsList;
	if (areOptionsEqual) {
	return;
	}
	setInternalOptions(optionsList);
	}, [optionsList]);

if (!areOptionsInitialized) {
    setAreOptionsInitialized(true);
}

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

N/A

[QichenZhu]

@Krishna2323's proposal was the first to identify the root cause and provide a solution to address it directly.

🎀👀🎀 C+ reviewed