[HOLD for payment 2023-06-23] [$1000] Invite message input is not auto focus after going back

[kavimuru]

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. Go to Setting > Workspace
2. Select any workspace
3. Go to mange member
4. Click on the invite button
5. Select some users and click next button
6. Notice that invite message input is autofocus
7. Click on get assistant button to go to get assistance page
8. Click on back button

Expected Result:

Invite message input shout auto-focus after going back

Actual Result:

Invite message input is not auto-focus after going back

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.22-0
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

Screencast.from.01-06-2023.11_35_36.webm

Recording.851.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dukenv0307
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1685594152627279

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010b8ccb7d8f4f0c12
• Upwork Job ID: 1666105345390592000
• Last Price Increase: 2023-06-06

[melvin-bot]

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

[kevinksullivan]

checking slack

https://expensify.slack.com/archives/C049HHMV9SM/p1685751228033779?thread_ts=1685594152.627279&cid=C049HHMV9SM

[hoangzinh]

Proposal

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

Invite message input is not auto focus after going back

What is the root cause of that problem?

Currently we only trigger focus for invite message input when componentDidMount

App/src/pages/workspace/WorkspaceInviteMessagePage.js

Lines 81 to 90 in 0813e2c

	componentDidMount() {
	this.focusTimeout = setTimeout(() => {
	this.welcomeMessageInputRef.focus();
	// Below condition is needed for web, desktop and mweb only, for native cursor is set at end by default.
	if (this.welcomeMessageInputRef.value && this.welcomeMessageInputRef.setSelectionRange) {
	const length = this.welcomeMessageInputRef.value.length;
	this.welcomeMessageInputRef.setSelectionRange(length, length);
	}
	}, CONST.ANIMATED_TRANSITION);
	}

So when we're in the Invite Message page, we go to Assistance page then go back, the Invite Message is not mounted again so above focus logic won't be triggered

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

I think we can listen on navigationFocus change. If the Invite Message previously is not focus, now it's focus, we should trigger focus logic above.

More implement details:

• Add HOC withNavigationFocus to component WorkspaceInviteMessagePage
• In componentDidUpdate of component WorkspaceInviteMessagePage, we need to check if !prevProps.isFocused && this.props.isFocused, then we will call the same code in componentDidMount

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[tienifr]

Proposal

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

invite message input is not auto focus after going back

What is the root cause of that problem?

In

App/src/pages/workspace/WorkspaceInviteMessagePage.js

Lines 81 to 90 in 0813e2c

	componentDidMount() {
	this.focusTimeout = setTimeout(() => {
	this.welcomeMessageInputRef.focus();
	// Below condition is needed for web, desktop and mweb only, for native cursor is set at end by default.
	if (this.welcomeMessageInputRef.value && this.welcomeMessageInputRef.setSelectionRange) {
	const length = this.welcomeMessageInputRef.value.length;
	this.welcomeMessageInputRef.setSelectionRange(length, length);
	}
	}, CONST.ANIMATED_TRANSITION);
	}

we focus the input only when the component is mounted. When we open Get assistance modal, the Add message modal is not unmounted, that why when users go back, the input is not re-focused

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

I think we should fix this problem in BaseTextInput.

1. Add withNavigationFocus to BaseTextInput
2. In componentDidUpdate check if !prevProps.isFocused && this.props.isFocused && this.props.autoFocus is true, re-focus the input
3. Add autofocus to WorkspaceInviteMessagePage and other places if needed

Result

Screen.Recording.2023-06-05.at.17.28.12.mov

[melvin-bot]

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

[melvin-bot]

Current assignee @kevinksullivan is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[kevinksullivan]

Validated this is a bug in slack, moving forward.

[will0225]

I will work on this

[s77rt]

@hoangzinh Thanks for the proposal. Your RCA is correct and the solution makes sense. Let's do it 🚀

🎀 👀 🎀 C+ reviewed

cc @AndrewGable

[s77rt]

@tienifr Thanks for the proposal. I think it's the same as @hoangzinh's proposal but shifted to BaseTextInput. For this issue I think it may be better to keep the logic in the same page. I prefer to keep navigation related HOC at the pages level as navigation may not be available in some outside cases.

[raphaelppp]

Proposal

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

Whenever the user comes back from the assistance, the focus is not restored.

This happens at least in two pages : the WorkspaceSettingsPage and the WorkspaceInviteMessagePage,
and probably on every form with an assistance button

What is the root cause of that problem?

The cause is twofold:

• Whenever the user clicks down any button, including the assistance button, the focus is lost, even if the button has not been pressed. But this behavior may be intended.
• Whenever the user comes back from the assistance, the focus is not restored.

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

I would modify Form.js:

• store the last focused inputID before navigating away (onFocus)
• flag this inputID as pending a refocus when navigating back (navigationRef.addListener)
• focus the corresponding input during the rendering

What alternative solutions did you explore?

I did not thoroughly explore it, but it may be desirable to prevent buttons in general from stealing the focus when being touched.

[melvin-bot]

📣 @raphaelppp! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[raphaelppp]

Contributor details
Your Expensify account email: origanot@hotmail.fr
Upwork Profile Link: https://www.upwork.com/freelancers/~018de0a5142fb6cbd2

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[s77rt]

@raphaelppp Thanks for your interest here but we have a proposal template to follow, please read the contributing guide.

[raphaelppp]

Proposal

[Updated](link to proposal)
My apologies for overlooking the contributing guide.

[melvin-bot]

📣 @hoangzinh You have been assigned to this job by @AndrewGable!
Please apply to this job in Upwork 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 📖

[AndrewGable]

Ah I missed this comment, thank you!

[kevinksullivan]

Offers sent to @s77rt and @hoangzinh . @dukenv0307 , can you apply to the job in upwork for reporting?

https://www.upwork.com/jobs/~010b8ccb7d8f4f0c12

[hoangzinh]

@s77rt @AndrewGable PR is ready #20667. Please help me review it. Thanks

[dukenv0307]

@kevinksullivan applied, thank you!

[kevinksullivan]

@dukenv0307 hired 👍

[melvin-bot]

🎯 ⚡️ Woah @s77rt / @hoangzinh, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @hoangzinh got assigned: 2023-06-12 18:48:12 Z
• when the PR got merged: 2023-06-14 16:35:44 UTC

On to the next one 🚀

[kevinksullivan]

watching this for 5 more days before paying out.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.28-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix welcome message input is not auto focus after going back #20667

If no regressions arise, payment will be issued on 2023-06-23. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@s77rt] The PR that introduced the bug has been identified. Link to the PR:
• [@s77rt] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@s77rt] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@s77rt] Determine if we should create a regression test for this bug.
• [@s77rt] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kevinksullivan] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[s77rt]

• The PR that introduced the bug has been identified: This existed since the first implementation of the invite message page Implement Invite message page #15672 but perhaps it could have been handled on Auto focus Message input field on workspace invite member page #18791
• The offending PR has been commented on: Not a regression. No offending PR.
• A discussion in #expensify-bugs has been started: I don't think this is needed here, this is more like an improvement than a bug
• Determine if we should create a regression test for this bug: Yes, here https://expensify.testrail.io/index.php?/cases/view/1971060

---

Regression Test Proposal
In https://expensify.testrail.io/index.php?/cases/view/1971060

14. Click on "Next" to proceed to the next page
15. Verify the message field is auto-focused
16. Click on the "Get assistant" button
17. Click on back button
18. Verify the message field is auto-focused

[kevinksullivan]

Testrail update GH is created, will pay this out in a few days assuming no regressions.

[melvin-bot]

@AndrewGable, @hoangzinh, @s77rt, @kevinksullivan Huh... This is 4 days overdue. Who can take care of this?

[AndrewGable]

@kevinksullivan is going to payout!

[kevinksullivan]

Ah sorry for the delay. This is all set!