React-native-google-places-autocomplete: Clicking on suggestion doesn't fire onpress event on first click, but when you press second time onpress event is fired.

Created on 16 Jul 2018  Â·  5Comments  Â·  Source: FaridSafi/react-native-google-places-autocomplete

<GooglePlacesAutocomplete
            placeholder='Search'
            placeholderTextColor='#1F4497'
            minLength={2} // 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
            listViewDisplayed='auto'    // true/false/undefined
            fetchDetails={true}
            renderDescription={(row) => row.description} // custom description render
            enablePoweredByContainer={false}
            onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                console.log(data);
                console.log("*****");
                console.log("pressing location");
                //console.log(details.geometry.location);
                this.props.onFindingDirections(details.geometry.location);
            }}
            getDefaultValue={() => {
                return ''; // text input default value
            }}
            query={{
                // available options: https://developers.google.com/places/web-service/autocomplete
                key: GOOGLE_API_KEY,
                language: 'en', // language of the results
                //types: '(cities)', // default: 'geocode'
                // components: 'country:gh'
            }}
            styles={{
                description: {
                    fontWeight: 'bold'
                },
                predefinedPlacesDescription: {
                    color: 'blue'
                }
            }}
            currentLocation={false} // Will add a 'Current location' button at the top of the predefined places list
            //currentLocationLabel="Current location"
            //nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
            //GoogleReverseGeocodingQuery={{
                // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
                //}}
                /*GooglePlacesSearchQuery={{
                // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
                rankby: 'distance',
                types: 'food'
            }}*/

            filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
            //predefinedPlaces={[homePlace, workPlace]}
            predefinedPlacesAlwaysVisible={true}
            debounce={500} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
            renderLeftButton={() => <Icon name="search" size={20} color="#1F4497" style={{ alignSelf: 'center', paddingHorizontal:5}}/>}
            renderRightButton={() => <Text></Text>}
            />
    );
}

Most helpful comment

@rickardinho @cr21
This was happening to me because I had this control inside ScrollView.
Using keyboardShouldPersistTaps="handled" on ScrollView seems to fix it

All 5 comments

I have the same issue. I think its because on the first click, the textInput loses focus, and then its only the second click that is recognised as the onPress event.
This isn't ideal - is there a way to make the click recognised even though the text input is focussed?

@rickardinho @cr21
This was happening to me because I had this control inside ScrollView.
Using keyboardShouldPersistTaps="handled" on ScrollView seems to fix it

Yes I found hack , you need to change in node modules for that

On Wed, 22 Aug 2018, 11:42 EstebanBP, notifications@github.com wrote:

Have you found any solution or workaround for this?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/322#issuecomment-414922976,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI3Trt2BTWNCdUxk3Ode-XZfYeQo9xAKks5uTPYzgaJpZM4VQpLb
.

@cr21 Did you solve the problem ?

If you are still facing this issue @EstebanBP solved the issue for me.
wrap the GooglePlacesAutocomplete inside a Scrollview and add
keyboardShouldPersistTaps="handled"

Was this page helpful?
0 / 5 - 0 ratings