[HOLD for payment 2022-02-01] Pressing "Tab" key while the result list of AddressSearch is open leaves it open even after clicking outside

[aldo-expensify]

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. Type an address that yield results
2. Press "Tab" key
3. Click somewhere else in the form

Expected Result:

The list of results should close after clicking outside
Focused element of the list after pressing tab should be highlighted

Actual Result:

The list remains open event after focusing other inputs
No element of the list gets highlighted even if the focus changed to one of them after pressing tab

Screen.Recording.2021-11-04.at.8.44.53.PM.mov

Workaround:

The user can still close the list by focusing again on the AddressSearch input and clicking outside. Or the user can just ignore the opened list.

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number:
Reproducible in staging?:
Reproducible in production?:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @flaviadefaria (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @Dal-Papa (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

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

[MelvinBot]

@Dal-Papa, @kevinksullivan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Dal-Papa]

Chill @MelvinBot, it was the weekend and we just started a company offsite.

[developvsn]

In AddressSearch.js file we have to:

1. Add here onKeyPress prop
   

   App/src/components/AddressSearch.js

   Line 107 in d217777

   textInputProps={{

onKeyPress: (event) => {
                    if(event.code == 'Tab' && !isSelected){
                        googlePlacesRef.current.setAddressText("")
                    }
                },

to handle press "tab" button in input

2. Add to AddressSearch component isSelected state variable with useState hook to check if user selected final address we will not clear input field but only will move to next input field.
   

   App/src/components/AddressSearch.js

   Line 41 in d217777

   const AddressSearch = (props) => {

   
   const [isSelected, setIsSelected] = useState(true);

3. Change this variable when user selects something from dropdown in onPress method of GooglePlacesAutocomplete Component:

   App/src/components/AddressSearch.js

   Lines 91 to 93 in d217777

   	onPress={(data, details) => {
   	saveLocationDetails(details);

onPress={(data, details) => {
saveLocationDetails(details);
                setIsSelected(true)

4. Add onBlur method of GooglePlacesAutocomplete Component to make list of results close after clicking outside:
   

   App/src/components/AddressSearch.js

   Line 86 in d217777

   <GooglePlacesAutocomplete

onBlur={() => {
                    if(!isSelected){
                        googlePlacesRef.current.setAddressText("")
                    }}}

Screen.Recording.2021-11-09.at.19.44.40-1.2.mov

[MelvinBot]

@Dal-Papa, @kevinksullivan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[kevinksullivan]

https://www.upwork.com/jobs/~01324fec6df4ab30d9

[MelvinBot]

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

[NikkiWines]

I think @developvsn's proposal looks good, though I think it'd be event.key if we're matching to Tab and not the keyCode 9.

@kevinksullivan can you hire @developvsn for this job? Thanks!

[kevinksullivan]

All set!

[NikkiWines]

@developvsn any update here?

[developvsn]

@developvsn any update here?

Sorry, missed the previous message of yours. I'll take a look into that

[developvsn]

@developvsn any update here?

@NikkiWines Unable to fix the issue because there are a lot of internal library bugs, like functions blur() and focus() that don’t work at all.

@parasharrajat had plans to find a solution, any thoughts?

[parasharrajat]

I will look into it today.

[parasharrajat]

I am pretty sure we won't be able to contribute back to the main lib

---

Finally got time to work on this and I have a solution ready, video ⬇️ . Let me know what is next step? @NikkiWines
Changes would be done to GooglePlacesAutocomplete lib.

I am focusing on these issues for now

1. Close the list when we click away (outside the address input and its list)
2. Close the list as soon as you focus away from the last item on the list.
3. Row is selected twice when using Tab navigation.

screen-2022-01-13-054406_WVDEpzeq.mp4

[NikkiWines]

Finally got time to work on this and I have a solution ready, video ⬇️ .

Nice! 🎉

Let me know what is next step? @NikkiWines. Changes would be done to GooglePlacesAutocomplete lib.

I think the next step would be to fork the lib and spin up a PR with your changes @parasharrajat

[parasharrajat]

@NikkiWines Could you please fork it, I don't have privileges? I can send the PR.

Also please assign this issue to me. Thanks.

[MelvinBot]

📣 @parasharrajat You have been assigned to this job by @NikkiWines!
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 📖

[NikkiWines]

Oh yep, sorry - I forgot we have to handle that internally. @parasharrajat, just to be clear, you mentioned theGooglePlacesAutocomplete lib, but the lib we're currently using is react-native-google-places-autocomplete. The repo we'd be forking is https://github.com/FaridSafi/react-native-google-places-autocomplete

[parasharrajat]

Sorry for the confusion, I mean the same repo react-native-google-places-autocomplete. It has only one component GooglePlacesAutocomplete and I mentioned its name.

[NikkiWines]

Should be all good now @parasharrajat - https://github.com/Expensify/react-native-google-places-autocomplete

[parasharrajat]

Spinning up the PR. Thanks.

[parasharrajat]

PR is up Expensify/react-native-google-places-autocomplete#1.

[parasharrajat]

Leaving a note.
@kevinksullivan Based on this #7330 (comment), please hire me whenever ready.

[botify]

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

• Autoclose address autocomplete list #7330

If no regressions arise, payment will be issued on 2022-02-01. 🎊

[kevinksullivan]

Thanks @parasharrajat . Sent you an invite to the reposted job.

[parasharrajat]

Ping for

@kevinksullivan