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:
The options should looks like this:
apiOptions={{
options: {
types: ["(cities)"],
componentRestrictions: { country: "hu" },
}
}}
I think you should look here https://github.com/Tintef/react-google-places-autocomplete/issues