[HOLD #22850] [$500] App does not focus back on merchant on back from search / send message

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Click on green plus and click request money->manual
3. Enter any amount and continue
4. Select any user
5. Click on merchant, it should focus on field
6. Press CTRL+K or CMD+K , it will open search page
7. Click on back and observe that it does not focus back on merchant field

Expected Result:

App should focus back on merchant field on back from search

Actual Result:

App does not focus back on merchant field on back from search

Workaround:

unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.79-3
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
Notes/Photos/Videos: Any additional supporting documentation

Recording.7.mp4

mac.chrome.desktop.merchant.no.refocus.mov

windows.chrome.merchant.does.not.focus.on.back.from.search.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696574111976749

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c81606735a82e17e
• Upwork Job ID: 1710311136893546496
• Last Price Increase: 2023-10-06
• Automatic offers:
• tienifr | Contributor | 27439085
• dhanashree-sawant | Reporter | 27439087

[melvin-bot]

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

[saranshbalyan-1234]

Proposal

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

App does not focus back on merchant on back from search / send message

What is the root cause of that problem?

We are not focusing he input element when the screen is focused to MoneyRequestMerchantPage component again, this happens if we switch from other component or even if we reload.
We are not using useFocusEffect inside MoneyRequestMerchantPage.js to focus again just how we do in other pages to refocus if the current component is focused again for example refer MoneyRequestDescriptionPage.js

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

we need to follow same code as in MoneyRequestDescriptionPage.js

App/src/pages/iou/MoneyRequestDescriptionPage.js

Lines 63 to 77 in 3e4731d

	useFocusEffect(
	useCallback(() => {
	focusTimeoutRef.current = setTimeout(() => {
	if (inputRef.current) {
	inputRef.current.focus();
	}
	return () => {
	if (!focusTimeoutRef.current) {
	return;
	}
	clearTimeout(focusTimeoutRef.current);
	};
	}, CONST.ANIMATED_TRANSITION);
	}, []),
	);

We need to create on ref i.e. focusTimeoutRef and then paste the above code for useFocusEffect.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

App does not focus back on merchant on back from search / send message

What is the root cause of that problem?

The main problem is that we only focus once
When our screen is mounted
For this we use
onEntryTransitionEnd={() => textInput.current && textInput.current.focus()}

App/src/pages/iou/WaypointEditor.js

Line 202 in 5dc3c25

onEntryTransitionEnd={() => textInput.current && textInput.current.focus()}

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

To avoid the problem that we only focus once
We can use a separate hook instead of onEntryTransitionEnd

useFocusEffect(
        useCallback(() => {
            focusTimeoutRef.current = setTimeout(() => {
                if (textInput.current) {
                    textInput.current.focus();
                }
                return () => {
                    if (!focusTimeoutRef.current) {
                        return;
                    }
                    clearTimeout(focusTimeoutRef.current);
                };
            }, CONST.ANIMATED_TRANSITION);
        }, []),
    );

I like this option better as opposed to using InteractionManager because we can be sure that the appearance of AddressSearch pop-up cannot interrupt any animation

What alternative solutions did you explore? (Optional)

NA

[maxconnectAbhi]

Proposal

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

App does not focus back on merchant on back from search / send message

What is the root cause of that problem?

TextInput on MoneyRequestMerchantPage only focus once when screen is mounted, due to following code:

App/src/pages/iou/MoneyRequestMerchantPage.js

Line 95 in 5dc3c25

onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}

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

We should use this code to focus the TextInput everytime when screen mount

useFocusEffect(
        useCallback(() => {
            focusTimeoutRef.current = setTimeout(() => {
                if (textInput.current) {
                    textInput.current.focus();
                }
                return () => {
                    if (!focusTimeoutRef.current) {
                        return;
                    }
                    clearTimeout(focusTimeoutRef.current);
                };
            }, CONST.ANIMATED_TRANSITION);
        }, []),
    );

What alternative solutions did you explore? (Optional)

We should try to bind this functionality Internally in the Custom TextInput component and activate it through a prop name
shouldFocusAlways

[tienifr]

Proposal

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

App does not focus back on merchant field on back from search

What is the root cause of that problem?

In here, we only focus on the input onEntryTransitionEnd, which only trigger when the user navigates into, not back to, the page.

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

It's difficult to handle this focus correctly, all the proposals that use the above timeout are flaky since sometimes the inputRef is not initialized at the time the timeout ends, so the input is still not focused. Also those will duplicate the timeout code all over the places.

A best practice is to use a common useAutoFocusInput that listens wait for both transition end and initialization of the input, to focus. See the hook definition here.

So we should:

1. Hold this issue until that hook solution is merged
2. Use the useAutoFocusInput hook in MoneyRequestMerchantPage and remove the outdated onEntryTransitionEnd approach here

What alternative solutions did you explore? (Optional)

NA

[allroundexperts]

I would agree with @tienifr that we should hold this issue until the hook is created and then use that.