[HOLD for payment 2023-11-06] [$500] Reload on title and description of task field does not focus back

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.3.86-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: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697648537204909

Action Performed:

1. Open the app
2. Click on green plus and click on assign task
3. Write any title and click next
4. Click on title and on title page, reload and observe that it does focus back on title field
5. Click on description and on description page, reload and observe that it does focus back on description field

Expected Result:

App should focus back on title and description field on reload

Actual Result:

App does not focus back on title and description field on reload

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

Android: mWeb Chrome

Android.chrome.reload.no.focus.task.title.description.mp4

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

no.focus.back.mp4

mac.chrome.reload.no.focus.task.title.description.1.mov

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0187815170d8ee20df
• Upwork Job ID: 1714736739040681984
• Last Price Increase: 2023-10-18
• Automatic offers:
• tienifr | Contributor | 27349476
• dhanashree-sawant | Reporter | 27349478

[abdel-h66]

Proposal

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

New task page Title and Description do not get focused after a reload.

What is the root cause of that problem?

The TextInput components used on these two pages ( NewTaskTitlePage and NewTaskDescriptionPage) do not apply to the autoFocus.

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

• In NewTaskTitlePage.js and NewTaskDescriptionPage.js
• Pass the autoFocus property to TextInput

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[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 - @robertKozik (External)

[ZhenjaHorbach]

Proposal

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

Reload on title and description of task field does not focus back

What is the root cause of that problem?

After reloading the screen, ref which calls the input focus not ready yet

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

We can add autoFocus for TextInput in NewTaskDescriptionPage and NewTaskTitlePage

But the downside of this solution is
It breaks the transition animation during opening screens

So we need also add shouldDelayFocus

Plus we probably need to get rid of onEntryTransitionEnd on NewTaskTitlePage
https://github.com/Expensify/App/blob/e8962f2e6bf8d2dd5f99786b4530c9781587519d/src/pages/tasks/NewTaskTitlePage.js
And useFocusEffect on NewTaskDescriptionPage
https://github.com/Expensify/App/blob/e8962f2e6bf8d2dd5f99786b4530c9781587519d/src/pages/tasks/NewTaskDescriptionPage.js
Since in this case it is no longer needed

What alternative solutions did you explore? (Optional)

We can always add a delay to the current autofocus implementation

[tienifr]

Proposal

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

App does not focus back on title and description field on reload

What is the root cause of that problem?

Sometimes when the screen first load, the inputRef is not initialized yet, so the focus is not made.
For this particular issue it's happening on the NewTaskDetailsPage and NewTaskDescriptionPage

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

We've developed a best practice to solve this issue, which is to use the useAutoFocusInput. We can just use it here as well.

The useAutoFocusInput does 2 things:

• Wait for transition to end
• Wait for input ref to be initialized

It's been used in the NewTaskDetailsPage here so solve this exact problem on that page. We can just apply the same change to the NewTaskDescriptionPage and NewTaskTitlePage. We need to remove the legacy onEntryTransitionEnd and useFocusEffect with timeout solution on those pages, use useAutoFocusInput there and standardize on that moving forward.

What alternative solutions did you explore? (Optional)

Any other pages that have this issue can be fixed the same way.

[alexpensify]

@robertKozik - can you review these proposals? Thanks!

[alexpensify]

@robertKozik - we need a review when you get a chance, thanks!

[robertKozik]

Thank you all for your proposals! I checked all of them and I believe we should go further with @tienifr as It consist of already used hook and standarizes the approach for all Task pages.
As for the other proposals:
@abdel-h66 - your proposal would break the transition animations
@ZhenjaHorbach - your proposal would probably work fine, but It's more complicated than @tienifr solution

This said, I believe we should go with @tienifr proposal

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[aimane-chnaif]

In this GH, I suggest to replace all occurrences of onEntryTransitionEnd with useAutoFocusInput hook throughout the app where autofocus is needed.

[robertKozik]

@aimane-chnaif do you think it should be handled by the contributor which introduced the useAutoFocusInput as the part of the original issue (I don't see a link to issue in your comment, so assuming that you are refering to that issue)?

[aimane-chnaif]

@tienifr is the contributor who introduced useAutoFocusInput

[rlinoz]

I am not being able to reproduce this in production, but since NewTaskTitlePage is still using onEntryTransitionEnd and we know that it is buggy, I agree with moving forward with @tienifr's proposal.

[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

[alexpensify]

Wow, that was fast! Now we will wait for automation to kick in here.

[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.92-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: 29950 Reload on title and description of task field does not focus back #30266

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

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

For reference, here are some details about the assignees on this issue:

• @robertKozik does not require payment (Contractor)
• @tienifr requires payment offer (Contributor)
• @dhanashree-sawant requires payment offer (Reporter)

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

• [@robertKozik] The PR that introduced the bug has been identified. Link to the PR:
• [@robertKozik] 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:
• [@robertKozik] 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:
• [@robertKozik] Determine if we should create a regression test for this bug.
• [@robertKozik] 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.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[robertKozik]

• [@robertKozik] The PR that introduced the bug has been identified. Link to the PR: N/A
• [@robertKozik] 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: N/A
• [@robertKozik] 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: N/A
• [@robertKozik] Determine if we should create a regression test for this bug. I don't suggest regression test as this doesn't affect task flow and reload is rare case.
• [@robertKozik] 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. N/A

[alexpensify]

Here is the payment summary:

• External issue reporter @dhanashree-sawant $50
• Contributor that fixed the issue @tienifr $500 + $250
• Contributor+ that helped on the issue and/or PR - @robertKozik paid via team

Upwork Job: https://www.upwork.com/jobs/~0187815170d8ee20df

*If applicable, the bonuses will be applied on the final payment

Extra Notes regarding payment: There is an urgency bonus since the PR was approved within the 3 business day mark. It looks like automation didn't catch it, but I confirmed the dates in the PR.

[alexpensify]

Alright, all required actions have been completed and everyone has been paid in Upwork.