[Due for payment 2025-05-22] [$250] Android - RHP Field - Keyboard is not displayed when navigating back from Help Panel

[jponikarchuk]

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?: Unable to check, new feature
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: #59156
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Samsung Galaxy A12 / Android 13
App Component: User Settings

Action Performed:

Precondition : Help Panel is enabled

1. Open Hybrid app
2. Go to Settings
3. Tap the status icon
4. Open Help Panel
5. Close Help Panel

Expected Result:

The input field is focused, and on-screen keyboard is displayed, similar to mWeb behavior

Actual Result:

The input field is focused, but on-screen keyboard is not displayed, different from mWeb behavior

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6784750_1743110346795.Dvnb8264_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021909740534838936622
• Upwork Job ID: 1909740534838936622
• Last Price Increase: 2025-04-15

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

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

Keyboard is not displayed when navigating back from Help Panel

What is the root cause of that problem?

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 163 in 1c74508

const {inputCallbackRef, inputRef} = useAutoFocusInput();

not automatically update when navigating back from Help Panel

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

We should add the useEffect here

const {inputCallbackRef, inputRef} = useAutoFocusInput();
useEffect(() => {
  if (inputRef.current) {
      inputRef.current.focus();
  }
}, []);

to automatically update when the page reload

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)

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.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-01 05:37:58 UTC.

Proposal

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

• The input field is focused, but the on-screen keyboard is not displayed—this behavior differs from how it works in mobile web (mWeb).

What is the root cause of that problem?

• We already have logic in place to focus the input after closing the help panel:

App/src/hooks/useAutoFocusInput.ts

Lines 59 to 65 in 9ce4864

	useEffect(() => {
	if (!shouldHideSidePane) {
	return;
	}
	setIsScreenTransitionEnded(isSidePaneTransitionEnded);
	}, [isSidePaneTransitionEnded, shouldHideSidePane]);

In this bug, the input is indeed being focused, but the on-screen keyboard does not appear because the modal animation transition is still in progress when the focus is triggered.

• The isSidePaneTransitionEnded flag is set right after the side pane animation completes:

App/src/hooks/useSidePane.ts

Line 81 in 9ce4864

]).start(() => setIsSidePaneTransitionEnded(true));

This animation is intended to simulate the modal close animation, but the timing doesn’t match exactly. As a result, when we call setIsSidePaneTransitionEnded(true) here:

App/src/hooks/useSidePane.ts

Line 81 in 9ce4864

]).start(() => setIsSidePaneTransitionEnded(true));

the actual modal animation might still be running.

• That’s why we had to introduce an additional delay of 150ms before refocusing the composer after the help panel closes:

App/src/hooks/useSidePane.ts

Line 112 in 9ce4864

focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current, CONST.ANIMATED_TRANSITION + CONST.COMPOSER_FOCUS_DELAY)(true);

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

• To ensure consistent behavior, we should apply the same approach used for refocusing the composer after closing the modal. Specifically, we should add a 150ms delay before triggering focus in this line:

App/src/hooks/useAutoFocusInput.ts

Line 64 in 9ce4864

setIsScreenTransitionEnded(isSidePaneTransitionEnded);

    const prevShouldHideSidePane = usePrevious(shouldHideSidePane)
    useEffect(() => {
        if (!shouldHideSidePane || !prevShouldHideSidePane) {
            return;
        }

       setTimeout(()=>{
        setIsScreenTransitionEnded(isSidePaneTransitionEnded);
       }, 150)
    }, [isSidePaneTransitionEnded, shouldHideSidePane]);

• In the snippet above, we not only introduce the 150ms delay, but also add a check for !prevShouldHideSidePane. This ensures that the focus logic does not run immediately after clicking the back button in the help panel modal. At that point, isSidePaneTransitionEnded may briefly be true, which could incorrectly trigger a focus before the transition has fully completed.

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)

[bernhardoj]

Proposal

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

The keyboard doesn't show after the sidepane modal closed.

What is the root cause of that problem?

The main root cause is that the focus is called too early before the modal is completely closed.

We have a logic here in useAutoFocusInput that supposed to refocus an input after the side pane transition is done.

App/src/hooks/useAutoFocusInput.ts

Lines 58 to 67 in f01c7de

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

We already call setIsSidePaneTransitionEnded(true) after the animation finishes, but that doesn't mean the modal is completely closed (btw the animation here is web only).

App/src/hooks/useSidePane.ts

Lines 68 to 83 in f01c7de

	useEffect(() => {
	setIsSidePaneTransitionEnded(false);
	Animated.parallel([
	Animated.timing(sidePaneOffset.current, {
	toValue: shouldApplySidePaneOffset ? variables.sideBarWidth : 0,
	duration: CONST.ANIMATED_TRANSITION,
	useNativeDriver: true,
	}),
	Animated.timing(sidePaneTranslateX.current, {
	toValue: shouldHideSidePane ? sidePaneWidth : 0,
	duration: CONST.ANIMATED_TRANSITION,
	useNativeDriver: true,
	}),
	]).start(() => setIsSidePaneTransitionEnded(true));
	}, [shouldHideSidePane, shouldApplySidePaneOffset, sidePaneWidth]);

But that's not the real problem. The problem is in this useEffect. shouldHideSidePane is the modal visibility state. If it becomes false, then the modal will start to close and we only want to refocus after the transition is ended, isSidePaneTransitionEnded is true.

App/src/hooks/useAutoFocusInput.ts

Lines 58 to 67 in f01c7de

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

However, isSidePaneTransitionEnded is always true. Why? isSidePaneTransitionEnded is just a state inside the hook. Each usage of the hook creates a new instance of isSidePaneTransitionEnded state. useSidePane is being used in several places, and each hook has its own isSidePaneTransitionEnded. So, when isSidePaneTransitionEnded changes on SidePane component, for example, it won't affect the useAutoFocusInput. So, what happens is that the refocus happens immediately as soon as shouldHideSidePane becomes true.

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

We can create a context that we put in AuthScreens to hold the isSidePaneTransitionEnded so it's shared between all auth components, but the focus still happens too early, which is why we have a ComposerFocusManager (it actually handles all input focus on a Modal). We can enable shouldEnableNewFocusManagement for the side pane, which handles the refocus correctly, but it only refocuses if the input is previously focused before the modal shows (and it doesn't work on the web).

So, for our case, we can use isReadyToFocus from ComposerFocusManager before refocus on useAutoFocusInput.

ComposerFocusManager.isReadyToFocus().then(() => setIsScreenTransitionEnded(isSidePaneTransitionEnded));

(No need to create a context, but lmk if we want one)

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

N/A

[melvin-bot]

@johncschuster Whoops! This issue is 2 days overdue. Let's get this updated quick!

[brunovjk]

I can reproduce and have context with the Help Panel, if this is for external I would like to take it as C+. Thanks.

Screen.Recording.2025-04-07.at.09.39.28.mov

[melvin-bot]

@johncschuster 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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