[N6] AddressSearch component - Border lingers after close

[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. Create NewDot account, verify
2. Navigate to /bank-account/company
3. Option 1:
   1. Type something that doesn't yield any result by the auto-complete (i.e. asdasdas)
   2. The list of results is empty and we get the grey line
4. Option 2:
   1. Type something that yield results
   2. Select any result
   3. Click again on the input (focus)

Expected Result:

• When there are no results to display, we should have a grey line
• Focusing on the input after selecting a result should make the grey line appear

Actual Result:

There is a grey line below the field

Screen.Recording.2021-10-13.at.10.48.43.AM.mov

Workaround:

No workaround necessary - just styling stuff

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

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 @cdraeger11 (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Luke9389]

@cdraeger11 no need to triage this. We'll work on it internally (deadline is Friday so External's not gonna cut it)

[MelvinBot]

Huh... This is 4 days overdue. Who can take care of this?

[MelvinBot]

Still overdue 6 days?! Let's take care of this!

[luacmartins]

I don't see this issue occurring anymore. Should we close this?

[aldo-expensify]

I don't see this issue occurring anymore. Should we close this?

It is still there, you have to select a result then click on the input again

Updated steps to reproduce

[luacmartins]

Looking at this comment FaridSafi/react-native-google-places-autocomplete#769 (comment), I'm not sure that rendering a fragment would solve the problem.

We can render a fragment or any other component like this listEmptyComponent={() => <></>}, but they are rendered inside the listView, which already has the borders and the problem persists.

I put up a PR with a workaround for now.

[aldo-expensify]

Looking at this comment FaridSafi/react-native-google-places-autocomplete#769 (comment), I'm not sure that rendering a fragment would solve the problem.

We can render a fragment or any other component like this listEmptyComponent={() => <></>}, but they are rendered inside the listView, which already has the borders and the problem persists.

I put up a PR with a workaround for now.

I think you are right about this, I tried something like this (return null or I don't remember well), but it will still render the box with borders.