[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.

[melvin-bot]

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

[puneetlath]

Makes sense to me. Putting it on hold.

[puneetlath]

@allroundexperts looks like the issue we were holding on is done. Shall we un-hold this?

[allroundexperts]

@puneetlath Yep, Let's go ahead with @tienifr's proposal.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @allroundexperts Please request via NewDot manual requests for the Reviewer role ($500)

[melvin-bot]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

📣 @dhanashree-sawant 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[tienifr]

PR ready for review: #30675.

[melvin-bot]

This issue has not been updated in over 15 days. @puneetlath, @allroundexperts, @tienifr eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[puneetlath]

I'm confused. Is this still on hold or is this done?

[tienifr]

@puneetlath This is all done. PR deployed to production 19 days ago but Melvin did not notify us. We can wrap up payment now. Thanks!

[puneetlath]

Payment summary:

• Reporter @dhanashree-sawant - $50 (paid via Upwork)
• Contributor @tienifr - $500 (paid via Upwork)
• C+ - @allroundexperts - $500 (to be paid via NewDot)

@allroundexperts please go ahead and make the request on NewDot.

Thanks everyone!

[JmillsExpensify]

$500 payment approved for @allroundexperts based on comment above.