Bug: Sometimes the map shows incorrect area after typing a zipcode into search bar on landing page.

[fancyham]

• Please assign @fancyham and @Shienny1 to the PR

Describe the bug

Sometimes the map shows incorrect area after typing a zipcode into search bar on landing page.

This happens only sometimes!

Steps to reproduce the issue

In this video (turn on audio), taken at the beginning of July 2024:

Devlasite_searchbarbug.mp4

1. User typed in "90013"
2. Map shows an address in 90045 zip code (as seen in search address field at top of screen)

[fancyham]

@Shienny1 -- FYI, this is based on your bug report from this usability review spreadsheet: https://docs.google.com/spreadsheets/d/1dDZzrwRvulR-TyGP2Gj_NWhS5AzK_drQ5X3xpnuqOFY/edit?gid=0#gid=0

[SAUMILDHANKAR]

@Shienny1 Hi Shienny, I wanted to reach out to you since I am not able to reproduce this error. Maybe it got fixed as part of some other PR but just wanted to check how frequent did you notice the error, I tried around 10-15 times. Also, did the error appear on click or on pressing the enter key? I have noticed an error related to enter key but that may not be exactly related to this issue. Looking forward to hearing from you. Thanks.

[fancyham]

I was able to reproduce it right now on the public site and on devla on desktop by:

1. typing "90015" and quickly hitting return on the keyboard
2. which sometimes resolved to a 90045 address: "Los Angeles, California 90045, United States" in the search field but sometimes stayed "90015" in the text form field, and the map moves to 90045 anyway.

My guess is that whatever algorithm is powering the autocomplete, when the user hits the return key and doesn't select an auto-complete address, the autocomplete fails in unpredictable ways.

Video with audio:

Screen.Recording.2024-09-14.at.1.24.46.PM.mov

[Shienny1]

@SAUMILDHANKAR Yes this only happens on desktop, because of the speed of hitting "ENTER", just like @fancyham mentioned. I tried it on my mobile devices - this problem does not occur.

[SAUMILDHANKAR]

Thanks Bryan, Shienny for your help. I am able to reproduce the issue. I am looking into it and would share any update asap.

[SAUMILDHANKAR]

Reopening this issue since the PR #2223 solution didn't seem to work (as discussed in the meeting today). I will work on reverting the changes of the PR next.

[fancyham]

Please assign @fancyham and @Shienny1 to the PR

[fancyham]

Added this comment to the proposed solution above, PR #2235:

Hi, this (the video above) is definitely an improvement!… but now feels broken in a different way :)

The user quickly typing 90015 and hitting return… that should be a valid input, so us going to the map and showing no address in the field (as in the video) feels broken but in a different way. Like the user entered something and we ignored it.

(I can see in the URL that the 90015 is in the request, too… that should be a valid input, no?)

So, this is a tough piece as you can see from past issues around this: https://github.com/hackforla/food-oasis/issues?q=is%3Aissue+autocomplete+is%3Aclosed

The desired flow is in this issue (it was iceboxed and then I closed it but now realize that I should have left it open)

• Bug: User-submitted text address doesn’t properly resolve into an address or GPS, causing a failed search #1692

Describes how we should try to resolve what they typed in - perhaps autocomplete happens silently before displaying the map, if needed… and if a match isn’t found, then we display an error or ask user to disambiguate.

So…

1. user enters 90015, hits return too quickly for autocomplete to respond
2. System should silently look for autocompletes for 90015
3. If it finds autocompletes, resolve to the top hit and use that as the address. END.
4. If it does NOT find an autocomplete that makes sense, we should display an error message “could not find address” error text, next to the address field which contains the user’s input. User can then re-enter an address.

Might that be possible?

Let me know if a sketch would be helpful.

Btw, the video you made was very helpful!

[MuthamilselvanG]

@hanapotski @Shienny1 Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again

[hanapotski]

Hi @MuthamilselvanG 👋 I haven't really taken a look at this much as I've been working on a different branch and helping John with conversion to vite but I might have some bandwidth to look into this this week 👌