Input field not updated on first click

[ScopeSV]

Describe the bug

Testing this component out. When entering text into the input field, a list of results are generated and displayed correctly. If I click an item from the results, the input field isn't populated. However the second time I click the item, or any item of that particular result, the input field is being updated correctly.

I have only tested this on iOS

Reproduction - (required - issue will be closed without this)

1. click in input field
2. add text
3. click on one of the suggestions
4. see the input field didn't update
5. open up suggestion list again
6. click on the same or any other suggestions
7. see the input field update correctly

https://user-images.githubusercontent.com/83061036/236853671-f2c9255e-a0a9-4b8a-b6c6-512d6f9588bb.mov

Click to expand!

<GooglePlacesAutocomplete
  placeholder='Search'
  onPress={(data, details = null) => {
      console.log(data, details)
  }}
  query={{
       key: GOOGLE_PLACES_API_KEY,
       language: 'en',
  }}
/>

Additional context

• Library Version: 2.5.1

• React Native Version: 0.70.8

• [ X] iOS

• [ ] Android

• [ ] Web

If you are using expo please indicate here:

• [ X] I am using expo

Add any other context about the problem here, screenshots etc

[KrisLau]

@FaridSafi @bell-steven I'm having the same issue and it only popped up recently for me with no code changes. Last code change on the file was in January and the issue only popped up for me today. Not quite sure what might be causing it.

The only thing I could think of is that I changed simulators from iOS 13.7 to iOS16.4 (iPhone 11 for both) but that change was made last week.

[OmarUsman777]

Any Solution?

[iuricernov]

I'm having the same issue.

I strongly hate this workaround, but this is the only way I found to fix it for now. I hope it gets fixed soon.

...
// Create a state to store the text
const [place, setPlace] = useState('');
...
return (
...
        <GooglePlacesAutocomplete
          placeholder="Search a place"
          onPress={(data) => {
            // without the setTimeout, it just doesn't update the component
            setTimeout(() => setPlace(data.description), 50);
          }}
          query={...}
          textInputProps={{
            value: place,
            onChangeText: setPlace,
          }}
        />
...
);

[akabeera]

Does this help with your issue? https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/872#issuecomment-1479706211

[marcelo-earth]

Does this help with your issue? #872 (comment)

Doesn't work for me neither 😢

[KrisLau]

@FaridSafi @bell-steven

[denysoleksiienko]

I made a workaround with updated input ref in useEffect. Hope I have helped you. My component looks like this now:

const GooglePlacesInput: FC<Props> = () => {
  const ref = useRef<GooglePlacesAutocompleteRef | null>(null);
  const [selectedPlaceDescription, setSelectedPlaceDescription] = useState('');

  const handleChange = useCallback((data: GooglePlaceData) => {
    const { description } = data;

    setSelectedPlaceDescription(description);
  }, []);

  const onPress = useCallback((data: GooglePlaceData) => {
    setTimeout(() => {
      handleChange(data);
    }, 100);
  }, []);

  useEffect(() => {
    if (selectedPlaceDescription) {
      ref.current?.setAddressText(selectedPlaceDescription);
    }
  }, [selectedPlaceDescription]);

  return (
    <GooglePlacesAutocomplete
      ref={ref}
      debounce={200}
      enablePoweredByContainer={false}
      fetchDetails={false}
      listLoaderComponent={<ActivityIndicator />}
      minLength={2}
      onPress={onPress}
      placeholder='Search...'
      query={{
        key: 'XXXX,
        language: 'en',
      }}
    />
  );
};

[drkuster]

@denysoleksiienko This is great! Thank you!