ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
473 stars 114 forks source link

Options not passed to query, options filter not working #187

Closed radikris closed 1 year ago

radikris commented 1 year ago

Stackoverflow question: https://stackoverflow.com/questions/74395951/react-google-autocomplete-options-not-working

I am using react-google-autocomplete with react-hook-form: And when I try to add options parameters to the Component (which should filter my API predictions down to my country, and only cities, but it's clearly not working:

  const { register, handleSubmit , control} = useForm();

          <Controller
        name="location"
        rules={{
          required: "This is a required field"
        }}
        control={control}
        render={({ field, fieldState }) => (
          <PlaceAutoComplete
            {...field}
            error={fieldState.error}
          />
        )}
      />

And the autocomplete component:

import GooglePlacesAutocomplete from "react-google-places-autocomplete";

export const PlaceAutoComplete = ({ error, ...field }) => {
  return (
    <div>
      <GooglePlacesAutocomplete
        apiKey="APIKEY"
        apiOptions={{
          types: ["(cities)"],
          componentRestrictions: { country: "hu" },
        }}
        selectProps={{
          ...field,
          isClearable: true,
        }}
      />
      {error && <div style={{ color: "red" }}>{error.message}</div>}
    </div>
  );
};

export default PlaceAutoComplete;

When I check the network log, you can see no options added to the query: Request URL: https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetPredictionsJson?1sLondon&4shu-HU&15e3&21m1&2e1&callback=_xdc_._dpoln7&key=APIKEY&token=111550

When I try to search for London, there should be no option, because I restrict to 'hu'- Hungary and only city:

wrong_prediction

MihaiSandor commented 1 year ago

The options should looks like this:

apiOptions={{
  options: {
    types: ["(cities)"],
    componentRestrictions: { country: "hu" },
  }
}}
AlexeyRDKV commented 1 year ago

I think you should look here https://github.com/Tintef/react-google-places-autocomplete/issues