ErrorPro / react-google-autocomplete

React components for google places API.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Options not passed to query, options filter not working

radikris opened this issue · comments

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

commented

The options should looks like this:

apiOptions={{
  options: {
    types: ["(cities)"],
    componentRestrictions: { country: "hu" },
  }
}}