React-native-google-places-autocomplete: How to close the autocomplete dropdown?

[tomazahlin]

I have a scenario, where the user can input something in the textbox and he can:

• choose something from the dropdown (works ok)
• not choose anything and type his own custom text (not sure how to close the dropdown with suggestions without clicking on any of the suggestions)

I can easily write a PR to solve this, by adding a onEditingEnd prop on TextInput and setting the state.listViewDisplayed to false. Does this sound okay, should I make a PR? I can also do that all this is enabled when setting a prop to the GooglePlacesAutocomplete, to keep backwards compatibility.

[FaridSafi]

Hello, as you prefer since there is still backward compatibility

[tomazahlin]

Here is a PR: https://github.com/FaridSafi/react-native-google-places-autocomplete/pull/19

[tomazahlin]

Looks like here is an issue with selecting a value, sorry about that. Will try to fix it.

[tomazahlin]

Seems it is not so easy to fix. With my PR, when clicking on any suggestion, the onEndEditing is executed, which first hides the suggestions, and then it is not selected. Do you have any suggestions how to fix this? I tried a few approaches, but no luck yet.

[mayask]

Hi @tomazahlin !

Using onEndEditing event handler doesn't quite fit for this purpose. It'll fire in both cases: when you leave text input and select an item from dropdown list.

Currently if you type random text without selecting any suggested places, it'll remain unchanged.

If you need to hide the dropdown, you'll need to do it manually (button press, etc.).

[rashtay]

@myaskevich How can we do it with a button press? Note that I have installed the package. I went through the source code and I see that _onBlur is the only way through which we can hide the listView. Can you let me know whether there is any option available for us to hide the list by maybe passing a state to the component?

[mayask]

Great news everyone!

I found some time to look at the problem and has eventually put together a simple solution: listViewDisplayed prop.

Available in v1.2.4

[Vishal1419]

@myaskevich @FaridSafi I have created a variable called shouldDisplayListView and set listViewDisplayed to that as shown in code below:

let shouldDisplayListView = false;
<GooglePlacesAutocomplete listViewDisplayed={shouldDisplayListView}
    textInputProps={{
        onFocus: () => shouldDisplayListView = true;
        onBlur: () => shouldDisplayListView = false;
    }} ............ />

But still I cannot see the listView. Instead if I set listViewDisplayed to "auto" then I can see the listView. But then onBlur of textInput I am unable to hide it.

[nbaghiro]

https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/293

[MSSPL-PiyaleeMaiti]

listViewDisplayed={shouldDisplayListView} this solution is not working for me.
Can anyone suggest any solution?
In my emulator when I tap on location from the suggestion list then the list is closed. But in my phone after clicking on location from suggestion list the list is opened as well not closed. What is the problem I can't understand, please suggest anyone any solution.
I am using :
react-native : 0.54.4 "react-native-google-places-autocomplete": "^1.3.6",