[Due for payment 2025-05-13] [$250] workspace-On refreshing workspace "role" page, user navigated to previous"confirm details"page

[mitarachim]

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.17-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N
Email or phone of affected tester (no customers): Slottwo1 fasfggffd@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings > members
3. Tap invite member > select a member
4. Tap next
5. Tap role
6. Refresh the page

Expected Result:

On refreshing workspace "role" page, user must not navigate to previous "confirm details" page & must stay in the same page.

Actual Result:

On refreshing workspace "role" page, user navigated to previous "confirm details" page instead of staying on the same page.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6779644_1742726488826.Screenrecorder-2025-03-23-16-06-17-679.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021905094103536069218
• Upwork Job ID: 1905094103536069218
• Last Price Increase: 2025-04-21
• Automatic offers:
• QichenZhu | Reviewer | 107004284
• daledah | Contributor | 107004285

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (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-03-30 08:25:15 UTC.

Proposal

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

On refreshing workspace "role" page, user navigated to previous "confirm details" page instead of staying on the same page.

What is the root cause of that problem?

When reloading the page, isRoleSelectionModalVisible is reset to false

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 68 in a1c07ac

const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);

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

We can create a separate page for Role selector modal

1. Add a new route: WORKSPACE_INVITE_MESSAGE_ROLE

And a new Onyx entry to store role data: WORKSPACE_INVITE_ROLE_DRAFT

2. Migrate [WorkspaceMemberDetailsRoleSelectionModal](https://github.com/Expensify/App/blob/main/src/pages/workspace/WorkspaceMemberRoleSelectionModal.tsx) to be a new page: WorkspaceInviteMessageRolePage. We will reuse most of the previous logics, the only change here would be:

Get role value from OnyxDB instead of current useState:

const [role] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_ROLE_DRAFT}${route.params.policyID}`, {
        canBeMissing: true,
    });

• Changes apply to WorkspaceInviteMessagePage:

Remove usage of WorkspaceMemberDetailsRoleSelectionModal

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 240 to 245 in 7e5a333

	<WorkspaceMemberDetailsRoleSelectionModal
	isVisible={isRoleSelectionModalVisible}
	items={roleItems}
	onRoleChange={changeRole}
	onClose={() => setIsRoleSelectionModalVisible(false)}
	/>

On role press, we navigate to role page:

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 238 in 7e5a333

onPress={openRoleSelectionModal}

onPress={() => {
        Navigation.navigate(ROUTES.WORKSPACE_INVITE_MESSAGE_ROLE.getRoute(route.params.policyID));
}}

More details can be further discussed in PR phase

POC

Screen.Recording.2025-04-19.at.14.20.06.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)

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

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

Lines 29 to 30 in 4750e38

	const showValidateActionModalFromURL = route.params.showValidateActionModal === 'true';
	const newRoleFromURL = route.params.newRole;

Implementation:

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 68 in a1c07ac

const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);

const isRoleSelectionModalVisibleOnURL = route.params?.isRoleSelectionModalVisible === 'true';
const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(isRoleSelectionModalVisibleOnURL ?? false);
useEffect(() => {
        Navigation.setParams({isRoleSelectionModalVisible});
}, [isRoleSelectionModalVisible]);

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

POC

Screen.Recording.2025-03-24.at.10.14.18.mov

After applying the changes, we have a bug where message input is focused and keyboard opens after opening the modal. This is because we use the hook useAutoFocusInput here, which focuses the input after 300ms, which is after the modal has been opened. To fix this issue, we can:

1. Add a flag shouldAutoFocus to useAutoFocusInput, defaults to true. This flag when using in here will prevent the input to be focused if isRoleSelectionModalVisible is true.

2. We can remove useAutoFocusInput in this page, and implement a simplified version of the hook inside this page

Simple implementation:

const inputRef = useRef<TextInputType | null>(null)

useEffect(() => {
	if (isRoleSelectionModalVisible || !inputRef.current) {
		return
	}
	const timeout = setTimeout(() => {
		InteractionManager.runAfterInteractions(() => {
			inputRef.current?.focus()
		})
	}, CONST.ANIMATED_TRANSITION)
	return () => clearTimeout(timeout)
}, [isRoleSelectionModalVisible])

Then update here

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 259 to 267 in 3ffa779

	ref={(element: AnimatedTextInputRef) => {
	if (!element) {
	return;
	}
	if (!inputRef.current) {
	updateMultilineInputRange(element);
	}
	inputCallbackRef(element);
	}}

ref={(element: AnimatedTextInputRef) => {
    if (!element) {
        return;
    }
    if (!inputRef.current) {
        updateMultilineInputRange(element);
    }
    inputRef.current = element;
}}

3. We can remove usage of useAutoFocusInput here, and add autoFocus to InputWrapper

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 245 in 9eb1310

<InputWrapper

autoFocus={!isRoleSelectionModalVisible}
shouldDelayFocus // Prevent layout shift when opening page

Screen.Recording.2025-03-30.at.15.24.29.mov

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.

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@QichenZhu - can you please review if this proposal will fix the issue? Thanks!

[QichenZhu]

@alexpensify Sure thing! Reviewing now.