[$500] Task - Title field is not focused when going back

[kbecciv]

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: 1.3.90.2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @daveSeife
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1698156938953799

Action Performed:

The title field is not focused when going back

1. Click on FAB > Assign Task
2. Write a title and click on next
3. Click the back button

Expected Result:

The title field is focused when going back

Actual Result:

The title field is not focused when going back

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

XRecorder_24102023_175148.mp4

Android: mWeb Chrome

XRecorder_24102023_175108.mp4

iOS: Native

t8Titlefocus.iosApp.mp4

iOS: mWeb Safari

t8Titlefocus.iosSafari.mp4

MacOS: Chrome / Safari

t8Titlefocus.MacChrome.mp4

MacOS: Desktop

t8Titlefocus.Desktop.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0167a5caffbbaa5a60
• Upwork Job ID: 1717217726602346496
• Last Price Increase: 2023-10-25

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @sophiepintoraetz (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[paultsimura]

Proposal

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

The "Title" field on task creation is not focused on navigating back

What is the root cause of that problem?

For handling the Task's Title field, we use a custom hook: https://github.com/Expensify/App/blob/c3a6b429569474d2e883fb83de802508a85f727a/src/hooks/useAutoFocusInput.js

This hook is intended to handle the Input field's state and auto-focus on navigation, when the screen is focused.

It uses the following useFocusEffect hook to handle the navigation state: whether the screen is focused or not:

App/src/hooks/useAutoFocusInput.js

Lines 19 to 32 in c3a6b42

	useFocusEffect(
	useCallback(() => {
	focusTimeoutRef.current = setTimeout(() => {
	setIsScreenTransitionEnded(true);
	}, CONST.ANIMATED_TRANSITION);
	return () => {
	if (!focusTimeoutRef.current) {
	return;
	}
	clearTimeout(focusTimeoutRef.current);
	};
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []),
	);

Here, we set the isScreenTransitionEnded to true with some fixed delay when the screen is focused (was navigated to). However, when the screen is unfocused, we only clear the timeout in order to clean up the memory, but we do not reset the isScreenTransitionEnded.

As a result, next time the screen is re-focused, this hook is not triggered, as the isScreenTransitionEnded was not changed (true -> true), and the input is already initialized:

    useEffect(() => {
        if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current) {
            return;
        }
        inputRef.current.focus();
    }, [isScreenTransitionEnded, isInputInitialized]);

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

Along with clearing the focusTimeoutRef, we should set the isScreenTransitionEnded to false on un-focusing (leaving) the screen:

    useFocusEffect(
        useCallback(() => {
            focusTimeoutRef.current = setTimeout(() => {
                setIsScreenTransitionEnded(true);
            }, CONST.ANIMATED_TRANSITION);
            return () => {
+               setIsScreenTransitionEnded(false);
                if (!focusTimeoutRef.current) {
                    return;
                }
                clearTimeout(focusTimeoutRef.current);
            };
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, []),
    );

Result:

Screen.Recording.2023-10-25.at.19.35.31.mp4

What alternative solutions did you explore? (Optional)

[rakshitjain13]

@paultsimura Was writing the same proposal but you bumped first! Supafast 💨

[DylanDylann]

Proposal

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

• Task - Title field is not focused when going back

What is the root cause of that problem?

• Currently, we are using the below useEffect to focus on the input:
  

  App/src/hooks/useAutoFocusInput.js

  Lines 12 to 17 in 05ae4c4

  	useEffect(() => {
  	if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current) {
  	return;
  	}
  	inputRef.current.focus();
  	}, [isScreenTransitionEnded, isInputInitialized]);

• When we refocus on this screen, the dependences [isScreenTransitionEnded, isInputInitialized] are not changed (isScreenTransitionEnde is still true) so the callback function in useEffect is not called, that lead to the bug

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

• We need to setIsScreenTransitionEnded(false) when the screen is blurred by adding setIsScreenTransitionEnded(false)
  to
  

  App/src/hooks/useAutoFocusInput.js

  Lines 24 to 29 in 05ae4c4

  	return () => {
  	if (!focusTimeoutRef.current) {
  	return;
  	}
  	clearTimeout(focusTimeoutRef.current);
  	};

• But when we go to the NewTaskDetailPage screen, there is a delay when focusing on input. So we need to improve this one by using InteractionManager.runAfterInteractions by:
  update
  

  App/src/hooks/useAutoFocusInput.js

  Lines 19 to 32 in 05ae4c4

  	useFocusEffect(
  	useCallback(() => {
  	focusTimeoutRef.current = setTimeout(() => {
  	setIsScreenTransitionEnded(true);
  	}, CONST.ANIMATED_TRANSITION);
  	return () => {
  	if (!focusTimeoutRef.current) {
  	return;
  	}
  	clearTimeout(focusTimeoutRef.current);
  	};
  	// eslint-disable-next-line react-hooks/exhaustive-deps
  	}, []),
  	);

  
  to

useFocusEffect(
        useCallback(() => {
            const interactionPromise = InteractionManager.runAfterInteractions(() => {
                setIsScreenTransitionEnded(true);
            });
            return () => {
                setIsScreenTransitionEnded(false);
                interactionPromise.cancel();
            };
        }, []),
    );

What alternative solutions did you explore? (Optional)

• NA

Result

Screencast.from.26-10-2023.09.46.35.webm

[abdulrahuman5196]

Reviewing now

[abdulrahuman5196]

@paultsimura 's proposal here #30366 (comment) looks good and works well. Other proposals are similar.

🎀 👀 🎀
C+ Reviewed

[melvin-bot]

Triggered auto assignment to @nkuoch, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[DylanDylann]

@abdulrahuman5196 my proposal mentioned the solution using InteractionManager.runAfterInteractions, that will fix the issue: delay when refocusing and remove using setTimeout, because i think that using setTimeout is workaround, please help check. cc @nkuoch

[abdulrahuman5196]

@DylanDylann Your proposal is only removing the use of setTimeout with runAfterInteractions, whereas the core issue to fix setIsScreenTransitionEnded(false) remains same. And furthermore runAfterInteractions are not expected to work completely with web, as mentioned in the doc - https://reactnative.dev/docs/interactionmanager

[abdulrahuman5196]

@nkuoch Gentle ping on this #30366 (comment)

[DylanDylann]

@abdulrahuman5196 thanks for review it

[DylanDylann]

@abdulrahuman5196 if we should not use interactionManager, so this problem will be fixed in this one #29009 (comment)

[abdulrahuman5196]

@sophiepintoraetz Kindly put this issue on hold for #30675? The same is fix being made at a different place.

[sophiepintoraetz]

Updated!

[paultsimura]

@abdulrahuman5196 the PR we were holding for is now merged. The issue is not reproducible anymore on the latest main.

[sophiepintoraetz]

taking off hold.

[sophiepintoraetz]

@abdulrahuman5196 - do you mind confirming if the issue still stands? If not, then I think payments are:
$500 to @DylanDylann and @abdulrahuman5196
$50 to @daveSeife

[DylanDylann]

@sophiepintoraetz why 500$ for me? Any mistake here?

[sophiepintoraetz]

@DylanDylann - sorry, I'm getting my issues wired - we're all set here!