workspace-Refreshing airlines page user directed to previous settings page

[nlemma]

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: V9.1.38-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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): Slottwo1 f088fd@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote note 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings - categories - settings
3. Tap airlines
4. Refresh the page

Expected Result:

Refreshing airlines page user must not be directed to previous settings page.

Actual Result:

Refreshing airlines page user directed to previous settings page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6817687_1746021528010.Screenrecorder-2025-04-30-19-23-00-559.mp4

View all open jobs on GitHub

[melvin-bot]

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

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-30 16:51:30 UTC.

Proposal

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

Refreshing airlines page user directed to previous settings page.

What is the root cause of that problem?

When reloading the page, isSelectorModalVisible is reset to false, so the selector modal is closed

App/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx

Line 41 in 29a77ed

const [isSelectorModalVisible, setIsSelectorModalVisible] = useState(false);

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

We should save isSelectorModalVisible, categoryID and groupID to params and use it after page reload, similar to update delegate role page:

App/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx

Lines 31 to 32 in 29a77ed

	const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(showValidateActionModalFromURL ?? false);
	const [newRole, setNewRole] = useState<ValueOf<typeof CONST.DELEGATE_ROLE> | undefined>(newRoleFromURL);

Implementation:

App/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx

Lines 41 to 43 in 29a77ed

	const [isSelectorModalVisible, setIsSelectorModalVisible] = useState(false);
	const [categoryID, setCategoryID] = useState<string>();
	const [groupID, setGroupID] = useState<string>();

    const [isSelectorModalVisible, setIsSelectorModalVisible] = useState(route.params.isSelectorModalVisible ?? false);
    const [categoryID, setCategoryID] = useState<string>(route.params.categoryID ?? '');
    const [groupID, setGroupID] = useState<string>(route.params.groupID ?? '');

    useEffect(() => {
        Navigation.setParams({
            isSelectorModalVisible,
            categoryID,
            groupID,
        });
    }, [isSelectorModalVisible, categoryID, groupID]);

Optional: We can put Fullscreen loading indicator to the page as well for after the reload

More details can be further discussed in PR phase

POC

Screen.Recording.2025-04-30.at.23.48.27.mov

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

None, navigation issue.

What alternative solutions did you explore? (Optional)

OR we can create a separate page for category selector modal.

Test branch for alternative solution.

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.

[stephanieelliott]

Seems like this behavior is consistent on all platforms - if the user doesn't actively make a selection and refeshes, we treat it as exiting without input and return to the Settings page. I think this is a reasonable fallback and not something we need to change.

[daledah]

@stephanieelliott There's a several PRs has been merged that fixed the same issue on other pages. For example:

#60626 - Workspace Invite Message page
#58452 - Add copilot page
#51267 - Confirm Delegate page

So IMO we should fix this issue as well to maintain consistency across App.