[$250] iOS - mWeb - Onboarding - The keyboard doesn't open when the name field is focus

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.1.9-2
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/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: iPhone 12 / Chrome
App Component: User Settings

Action Performed:

1. Login to the mWeb with a new account
2. Select any of the onboarding modals except "Manage my team's expense"

Expected Result:

The keyboard should open the name field is in focus

Actual Result:

The name field is focused but the keyboard doesn't open on the name field of the onboarding modal.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6761483_1741149453042.Keyboard_dont_open.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021897299810768522727
• Upwork Job ID: 1897299810768522727
• Last Price Increase: 2025-03-05

Issue Owner

Current Issue Owner: @fedirjh

[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/~021897299810768522727

[melvin-bot]

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

[LorenzoBloedow]

Couldn't reproduce without deactivating the keyboard on an iPhone 16 Simulator (Safari). Does it only happen on iPhone 12?
Also, this might be relevant.

[mitarachim]

Hello @LorenzoBloedow i can reproduce issue using iPhone 14 (mWeb/safari and mWeb/chrome)

ScreenRecording_03-05-2025.22-33-16_1.MP4

[maddylewis]

if the bug is reproducible on iPhone 14, then yeah, i think we should still try to fix this one.

[0xLLLLH]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-09 10:09:40 UTC.

Proposal

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

The keyboard doesn't open when the TextInput is focused.

After some investigation, I noticed that this problem does not only affect the onboarding but also other text inputs that need to be autofocused, like settings(/settings/profile/phone) and filters of the search page (/search/filters/keyword). And this problem is 100% reproducible on iOS 18.1 or later.

What is the root cause of that problem?

1. The existing autofocus logics almost rely on useAutoFocusInput, which will run inputRef.current?.focus() after transitions and interactions end.

   App/src/hooks/useAutoFocusInput.ts

   Lines 24 to 39 in 1247366

   	useEffect(() => {
   	if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN) {
   	return;
   	}
   	const focusTaskHandle = InteractionManager.runAfterInteractions(() => {
   	if (inputRef.current && isMultiline) {
   	moveSelectionToEnd(inputRef.current);
   	}
   	inputRef.current?.focus();
   	setIsScreenTransitionEnded(false);
   	});
   	return () => {
   	focusTaskHandle.cancel();
   	};
   	}, [isMultiline, isScreenTransitionEnded, isInputInitialized, splashScreenState]);

2. The iOS has a limit that the keyboard can only trigger within a short period after some user interactions. Runs inputRef.current?.focus() out of this period will make the input be focused without keyboard triggered.
3. However, in iOS 18.1 or later, the period seems to be shorter than in former versions like iOS 18.0. Manually setting the focus after transitions will be too late to trigger the keyboard.

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

For iOS mWeb (Chrome & Safari), we can use a simplified logic that runs inputRef.current?.focus() without waiting for transitions and interactions to end in the useAutoFocusInput.

For example, add the following code to the top of the useEffect of the useAutoFocusInput hook so that we can fix the bug with minimal changes and impact.

if (isMobileWebKit()) {
      inputRef.current?.focus();
      return;
}
// existing logics

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

N/A

What alternative solutions did you explore? (Optional)

I tried to use the autofocus props of the TextInput component, It works well too. But this approach needs to change every text input that needs to be autofocused around the codebase.

[bernhardoj]

Proposal

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

The input is focused but the keyboard doesn't show.

What is the root cause of that problem?

This is a common issue on mWeb Safari where it happens if we delay the focus. In our case, we use useAutoFocusInput hook which delays the focus.

App/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

Line 178 in add7b6e

ref={inputCallbackRef}

App/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

Line 45 in add7b6e

const {inputCallbackRef} = useAutoFocusInput();

This happens on other pages too, for example, we have #58040.

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

The focus delay was added to fix some issues on other platforms, such as Android and iOS. If we want to be safe, we can add a new param to useAutoFocusInput input whether to delay focus or not, with the default value of true. We will pass it as !isMobileSafari() for this onboarding page (and money request flow pages from #58040).

If the delay focus param is false, then we don't need the timeout and interaction manager.

App/src/hooks/useAutoFocusInput.ts

Lines 24 to 54 in add7b6e

	useEffect(() => {
	if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN) {
	return;
	}
	const focusTaskHandle = InteractionManager.runAfterInteractions(() => {
	if (inputRef.current && isMultiline) {
	moveSelectionToEnd(inputRef.current);
	}
	inputRef.current?.focus();
	setIsScreenTransitionEnded(false);
	});
	return () => {
	focusTaskHandle.cancel();
	};
	}, [isMultiline, isScreenTransitionEnded, isInputInitialized, splashScreenState]);
	useFocusEffect(
	useCallback(() => {
	focusTimeoutRef.current = setTimeout(() => {
	setIsScreenTransitionEnded(true);
	}, CONST.ANIMATED_TRANSITION);
	return () => {
	setIsScreenTransitionEnded(false);
	if (!focusTimeoutRef.current) {
	return;
	}
	clearTimeout(focusTimeoutRef.current);
	};
	}, []),
	);

In money request participants page, the input also has a focus delay by default, so we can use isMobileSafari to disable the autoFocus too for the money request participants page.

If we want to apply the solution globally, then we can ignore the focus delay if the platform is mobile safari browser in useAutoFocusInput, BaseSelectionList, BaseTextInput.

For example, in BaseSelectionList.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 683 to 689 in add7b6e

	if (textInputAutoFocus && shouldShowTextInput) {
	if (shouldDelayFocus) {
	focusTimeoutRef.current = setTimeout(focusTextInput, CONST.ANIMATED_TRANSITION);
	} else {
	requestAnimationFrame(focusTextInput);
	}
	}

if (isMobileSafari()) {
    focusTextInput();
} else if (shouldDelayFocus) {
    focusTimeoutRef.current = setTimeout(focusTextInput, CONST.ANIMATED_TRANSITION);
} else {
    requestAnimationFrame(focusTextInput);
}

The risk of applying the solution globally is that it could creat this kind of issue, but when that happens (or other issues) we can fix it in a follow-up.

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

N/A

[0xLLLLH]

Proposal

Updated

Changes:

1. Add a more detailed proposal change description with an actual code example
2. Correct the iOS version that can reproduce the problem

[maddylewis]

@fedirjh - lmk your thoughts on the above proposals - thanks!

[melvin-bot]

@fedirjh Eep! 4 days overdue now. Issues have feelings too...