React-native-google-places-autocomplete: List disappears when I try to select result [1.4.0]

[MariuszSpeednet]

Using example code I cannot select any result, because every time I try to select it, a list disappears. Happens only after update to 1.4.0.

[octobus55]

I also have same issue, when downgrade to 1.3.9 it resolves, but in 1.4.0 onPress doesn't work and list dissappers.

[wellingtonblessed]

I also have the same problem on 1.40. My temporary solution until this is resolved is to comment out the onblur prop on the TextInput in the package itself.

[dihan]

Have the same issue on 1.3.9.

I did notice that if the state changes on that component (in my case it was the parent) then the selection dropdown will reopen and address can be selected.

[dihan]

Further messing around I found that having Scrollview causes this problem.

[sunwooz]

commenting out the onBlur property freezes my detail list :(

[juanlet]

Further messing around I found that having Scrollview causes this problem.

Yeah, it's the scrollview 100%...version 1.4.0 here

[sunwooz]

I'm not using scroll view, but I am using a FlatList.

[malikgenius]

Any solution for this, i have updated to 1.4.0 and got this issue, now i deleted and re installed 1.3.9 but same issue ....

[dihan]

wellingtonblessed trick worked for me. commenting out onBlur on node_modules

...
onFocus={onFocus ? () => {this._onFocus(); onFocus()} : this._onFocus}
// onBlur={this._onBlur}
underlineColorAndroid={this.props.underlineColorAndroid}
...

As i mentioned earlier i had other TextInput fields with this and when the state changed the google-place-auto-complete dropdown menu re-activated. You might be able to play around with state in the component to trigger a re-render.

onChangeText={value => this.setState({ lastName: value })}

[BrianIto]

I downgraded to 1.3.9 and it worked fine! But now it doesn't work even in it, just like @malikgenius. I have a ScrollView here too. But, it's still a component, right? The behaviour is still the same, and the ListView Component always worked well inside another ListView, I really can't understand why is it triggering onBlur before onPress...

And why this downgrade worked for a while and then... boom. Same error. :(

Sad fact: The error appeared the day it was going to production.

[DzmitryUr]

+1 here with the same issue.
I have scrollview and get warning also:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead

Commenting out the onBlur prop works for me.

[fierysolid]

For those wondering, you can leave the onBlur prop alone and just add keyboardShouldPersistTaps="handled" (or whatever your desired tap behavior is) to your ScrollView. Hope this helps someone

[r-julien]

@fierysolid Great that's working for me, I didn't know this prop. Thank you!

[oaugusto256]

Thank you @fierysolid! That worked for me as well. 😃

[oleprohon]

None of these solution seem to work for me on Android, the results list just doesn't show up. Tried in a View, ScrollView and KeyBoardAvoidingView. Tried removing other components as well. Rolling back to 1.3.9 did not help either.

I have this warning in console:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

Any ideas?

[legshampoo]

+1 for me, tried the same steps as @oleprohon but no dice

[oleprohon]

This code ended up working for me:

```
placeholder='Adresse'
minLength={5} // minimum length of text to search
autoFocus={false}
returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
listViewDisplayed='true' // true/false/undefined
fetchDetails={true}
renderDescription={ row => row.description } // custom description render
components='country:ca'
onPress={(data, details = null) => {
let address = details.formatted_address.split(', ');

    this.props.handler({
      adresse: address[0],
      ville: address[1],
      postal: address[2].replace('QC ', '')
    });
  }}
  getDefaultValue={() => ''}
  query={{
    // available options: https://developers.google.com/places/web-service/autocomplete
    key: '',
    language: 'fr', // language of the results
    types: 'address', // default: 'geocode'
    components: 'country:ca' // added  manually
  }}
  styles={{
    textInputContainer: {
      width: '100%'
    },
    description: {
      fontWeight: 'bold'
    },
    predefinedPlacesDescription: {
      color: '#1faadb'
    }
  }}
  GooglePlacesDetailsQuery={{ fields: 'formatted_address' }}
  debounce={300} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
  />
  </View>
  <View style={ Layouts.Visite.form }>

  // stuff

  </View>
  </ScrollView>
  </View>

```

I'm using 1.4.1. Hope this helps a bit !

[tailaw]

For those wondering, you can leave the onBlur prop alone and just add keyboardShouldPersistTaps="handled" (or whatever your desired tap behavior is) to your ScrollView. Hope this helps someone

My gosh, I spent a good few hours trying to see if I've done anything wrong until I found this and it worked magically!

[BrianIto]

The @fierysolid solution works, I think it's enough to close the issue

[bell-steven]

This is now mentioned in the readme. Closing.

[taegoobot]

For those wondering, you can leave the onBlur prop alone and just add keyboardShouldPersistTaps="handled" (or whatever your desired tap behavior is) to your ScrollView. Hope this helps someone

I am still getting the error even if I tried the above... I have checked keyboardShouldPersistTaps of the internal ScrollView (for result list) is successfully changed to "handled" in react debugger.

[brforest]

On web, the only way I was able to get it to work was by commenting out onBlur. Adding keyboardShouldPersistTaps="handled" was not enough.

[manny1001]

On web, the only way I was able to get it to work was by commenting out onBlur. Adding keyboardShouldPersistTaps="handled" was not enough.

please assist, I am also trying to do it on web but th eonPress handler does not do anythng at all, I am using expo..any idea?

[bell-steven]

@brforest @manny1001 can you see install the latest RC and see if it fixes it for you?
npm i [email protected]

[manny1001]

@brforest @manny1001 can you see install the latest RC and see if it fixes it for you?
npm i [email protected]

Hi Steven, thanks for your prompt response and attempt to resolve the bug.
Unfortunately on my side the onPress handler still does fire. Even when I run an simple alert function.

Nonetheless, editing the onBlur function in GooglePlacesAutocomplete.js is my current workaround on Web. Is this good work around that won't result in any other buggy behavior?

thanks

edit on blur to :

const _onBlur = () => {
setTimeout(()=>{
setListViewDisplayed((_prev)=>false);
}, 200);
inputRef?.current?.blur();
};

[bell-steven]

@manny1001 I am a little apprehensive about adding a setTimout. Some devices are faster than others, and I don't see how this is a definitive fix.