search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.49k stars 2.84k forks source link

[HOLD for payment 2023-09-29] [$500] Web - App does not display address suggestion after clicking 'Fix the errors' link #27181

Closed kbecciv closed 1 year ago

kbecciv commented 1 year ago

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 plus and click on request money
  3. Click on distance
  4. Open Start/Finish
  5. Type in any random text and click on Save
  6. Focus back on input, remove the random text and type in text which will trigger suggestions eg: ind
  7. When suggestion is open, click on 'Fix the errors' link
  8. Observe that suggestion closes, try removing all text and rewrite text that will trigger suggestions and observe that suggestions are not displayed
  9. Click in empty space below input to lose focus and again focus on input, observe that now suggestions work fine

Expected Result:

Fix the errors link should not disable address suggestions

Actual Result:

Fix the errors link disables address suggestions in waypoint pages

Workaround:

Unknown

Platforms:

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

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

https://github.com/Expensify/App/assets/93399543/f1218605-7418-433a-b891-bd885d67ed2c

https://github.com/Expensify/App/assets/93399543/8091edd6-7f4d-4a0b-8521-a82d64de9142

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~017e44e8bf9e07ab26
  • Upwork Job ID: 1701286801034104832
  • Last Price Increase: 2023-09-18
  • Automatic offers:
    • jjcoffee | Reviewer | 26745226
    • bernhardoj | Contributor | 26745229
    • dhanashree-sawant | Reporter | 26745230
melvin-bot[bot] commented 1 year ago

Job added to Upwork: https://www.upwork.com/jobs/~017e44e8bf9e07ab26

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

Bug0 Triage Checklist (Main S/O)

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

abdel-h66 commented 1 year ago

Proposal

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

Suggestions list disappears after clicking 'Fix the errors' link

What is the root cause of that problem?

When clicking fix the errors link, the Text input does not seem to be blurred, as the onBlur is never trigerred. Not sure if this is coming from the Autocomplete lib or something else.

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

I have found a way to force the blur on the text input when calling onFixTheErrorsLinkPressed
https://github.com/Expensify/App/blob/fd3a753b28e8ba08799160d45402a82035c556c5/src/components/Form.js#L421-L423

By checking if the input is focused, forcing it to go onBlur and then call the focus() method

                            // Focus the input after scrolling, as on the Web it gives a slightly better visual result
                            if (focusInput.focus && typeof focusInput.focus === 'function') {
                                if(focusInput.isFocused()) {
                                    focusInput.blur();
                                }
                                focusInput.focus();
                            }

What alternative solutions did you explore? (Optional)

N/A

bernhardoj commented 1 year ago

Proposal

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

Address autocomplete suggestion list hides when we press Fix the errors.

What is the root cause of that problem?

This issue is coming from our fork of react-native-google-places-autocomplete. Clicking the Fix the errors shouldn't close the list because the input is still in a focused state, but this (old) PR adds a new behavior to the lib to always hide the list if we click outside of the autocomplete suggestion element.

It's to fix this issue where the list didn't close if we moved away from it using the Tab key. The root cause of it is explained here. The solution to that issue is:

  1. Hide the list of a click that happened outside of the autocomplete elements.
  2. Add onBlur to each list item Pressable so moving away with Tab will call the onBlur

onBlur will hide the list if the blur is triggered by elements outside of the autocomplete elements.

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

The hide when clicking outside solution (1) is actually not necessary. It's to handle the case where the list is still visible after moving away from it using the Tab key, but it won't ever happen if we already hide it when we are moving away from the list by putting onBlur to each item in the list (2).

So, the solution is simply to remove the hide when clicking outside logic (outsideClickHandler).

jjcoffee commented 1 year ago

@abdel-h66 To avoid blindly adding fixes where we don't understand the root cause fully, I think it'd be useful to understand why the input is not blurred in this case. Otherwise we risk adding workarounds, rather than solid fixes.

@bernhardoj Hiding the list if we click outside the autocomplete element is the expected behaviour, so we wouldn't want to remove that! I see that clicking Fix the errors doesn't blur the input, but it seems like it should?

bernhardoj commented 1 year ago

I see that clicking Fix the errors doesn't blur the input, but it seems like it should?

@jjcoffee this PR makes pressing the Fix the errors does not blur the text input.

Hiding the list if we click outside the autocomplete element is the expected behaviour

It will still hide if we click outside but only if clicking outside blurs the text input. So, the only way to hide the list is to blur the autocomplete elements. I would say that the outsideClickHandler is a workaround.

jjcoffee commented 1 year ago

@bernhardoj Thanks, that cleared things up for me!

Happy to go with @bernhardoj's proposal! The RCA is correct and the solution makes sense.

:ribbon::eyes::ribbon: C+ reviewed

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

Beamanator commented 1 year ago

Sorry y'all, looking today!

melvin-bot[bot] commented 1 year ago

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

Offer link Upwork job

melvin-bot[bot] commented 1 year ago

📣 @bernhardoj 🎉 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[bot] commented 1 year ago

📣 @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

bernhardoj commented 1 year ago

PR for the fork is here

cc: @jjcoffee

bernhardoj commented 1 year ago

App PR is ready

cc: @jjcoffee

melvin-bot[bot] commented 1 year ago

🎯 ⚡️ Woah @jjcoffee / @bernhardoj, 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 🎉

On to the next one 🚀

bernhardoj commented 1 year ago

Looks like it's unintentionally gets closed

alexpensify commented 1 year ago

@Beamanator - did you mean to close this one because it's a dupe?

Beamanator commented 1 year ago

I didn't close it on purpose, I merged a PR and GH had some automation that auto-closed this :D So thanks for reopening @alexpensify ! 👍

alexpensify commented 1 year ago

All good! We are back on track now.

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

If no regressions arise, payment will be issued on 2023-09-29. :confetti_ball:

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.

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

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

melvin-bot[bot] commented 1 year ago

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:

alexpensify commented 1 year ago

Here is the payment summary:

Upwork Job: https://www.upwork.com/jobs/~017e44e8bf9e07ab26

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

Extra Notes regarding payment: There is a urgency bonus here and everyone has been paid in Upwork.

@jjcoffee - please complete the checklist and we can close this GH. Thanks!

jjcoffee commented 1 year ago
jjcoffee commented 1 year ago

Regression Test Proposal

  1. Click on FAB and click on Request Money.
  2. Click on distance.
  3. Open Start/Finish.
  4. Type in any text in the address input.
  5. Press Save without selecting any address. You will get a form error.
  6. Focus back on the address input and type some text to trigger suggestions.
  7. Click on 'Fix the errors' link.
  8. Verify that the suggestions stay open and you can continue typing to trigger further suggestions.

Do we agree 👍 or 👎

jjcoffee commented 1 year ago

@alexpensify Checklist complete!

melvin-bot[bot] commented 1 year ago

@Beamanator, @alexpensify, @jjcoffee, @bernhardoj Whoops! This issue is 2 days overdue. Let's get this updated quick!

Beamanator commented 1 year ago

Payment should happen soon, we are all coming back from a very busy week :D

alexpensify commented 1 year ago

Everyone was paid last week - here. @Beamanator - this GH is open because we need your approval for this regression test:

https://github.com/Expensify/App/issues/27181#issuecomment-1740556308

Thanks!

Beamanator commented 1 year ago

Aah i wasn't aware we were waiting on me, sorry :D Regression test looks good!

alexpensify commented 1 year ago

Closing - the regression test request has been created, so going to close this out here.