[Due for payment 2025-06-09] [$250] Hybrid - iOS - FAB - Room name field is auto unfocused when switching from Chat to #Room

[IuliiaHerets]

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.21-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+260302kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.3
App Component: Other

Action Performed:

1. Launch hybrid app.
2. Open FAB > Start chat.
3. Make sure it opens Chat page, or else go to Chat, close it and repeat Step 2.
4. Tap #Room.

Expected Result:

Room name field will remain focused.

Actual Result:

Room name field is auto unfocused and the field throws error "Please enter a room name".

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6787979_1743431804425.ScreenRecording_03-31-2025_22-32-51_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021906800718426819330
• Upwork Job ID: 1906800718426819330
• Last Price Increase: 2025-04-14
• Automatic offers:
• ikevin127 | Contributor | 106963135

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @maddylewis

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Proposal

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

The auto focus of the new room page is lost when switching tabs.

What is the root cause of that problem?

This kind of issue was previously fixed in #28646 where they introduced a 600ms delay when auto-focusing.

However, this PR #29203 maybe unintentionally change the delay to 300ms that is coming from useAutoFocusInput hook.

App/src/hooks/useAutoFocusInput.js

Lines 28 to 30 in 5e01376

	focusTimeoutRef.current = setTimeout(() => {
	setIsScreenTransitionEnded(true);
	}, CONST.ANIMATED_TRANSITION);

For context, we have this old issue that has the same issue. I have a proposal there and there is a deeper investigation about the issue.

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

Have a new param to useAutoFocusInput called delay that has a default value of CONST.ANIMATED_TRANSITION. For the new room page, we will pass a custom 600ms delay.

-const {inputCallbackRef} = useAutoFocusInput();
+const {inputCallbackRef} = useAutoFocusInput(600);

However, there is another logic to auto focus the input after the side pane transition ends, but it's triggered on the first mount too.

App/src/hooks/useAutoFocusInput.ts

Lines 57 to 65 in 003d14f

	// Trigger focus when side pane transition ends
	const {isSidePaneTransitionEnded, shouldHideSidePane} = useSidePane();
	useEffect(() => {
	if (!shouldHideSidePane) {
	return;
	}
	setIsScreenTransitionEnded(isSidePaneTransitionEnded);
	}, [isSidePaneTransitionEnded, shouldHideSidePane]);

To fix it, we need to skip it if it's the initial mount (using a ref).

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

N/A

[ntdiary]

Still under review, requires further investigation.

I'm curious about the root cause of the input losing focus.

[melvin-bot]

@ntdiary Huh... This is 4 days overdue. Who can take care of this?

[ntdiary]

I've figured out the root cause of the focus loss. The key sequence is

1. User selects the #Room tab.
2. Transition animation begins (i.e., setViewControllers:direction:animated:completion:)
3. Our useAutoFocusInput hook assigns focus to the room name input field.
4. Upon animation completion, iOS internally calls removeFromSuperview, which causes the input to lose focus.

We can fix this by focusing only after animations complete (two approaches):

1. as @bernhardoj's suggestion, increase the delay to 600ms.
2. use the onPageSelected event, but right now, react-navigation doesn’t expose that event to the app.

Personally, I think the second approach might be better. :)