react hook forms with react google autocomplete not showing selected value on first select

Question

using react hooks form with react google autocomplete. Problem is on first selection, the react google autocomplete does not show the selected value, but just what the user types. Only if you select it the second time then it will say what you select. Subsequent selects are fine.

For example, user types in Disneyland and you select Disneyland Resort, Disneyland Drive, Anaheim, CA, USA from the autocomplete list, it still says Disneyland, but if you choose Disneyland Resort, Disneyland Drive, Anaheim, CA, USA again, it will now say that. anyone have any idea why this is happening and how to fix to get it to show the first time on select?

here is the code

import AutoComplete from "react-google-autocomplete";
import { useForm, Controller } from "react-hook-form";

const {
  register,
  handleSubmit,
  control,
  formState: { touchedFields, errors },
  reset,
  watch,
} = useForm();

<Controller
  name="name"
  control={control}
  render={({ field, fieldState }) => (
    <AutoComplete
      apiKey={some_api_key}
      options={{
        types: ["establishment"],
        fields: ["name"],
      }}
      {...field}
    />
  )}
/>;

score 0 · Answer 1 · answered Nov 29 '22 at 21:18

This worked for me:

import AutoComplete from "react-google-autocomplete";
import { useForm, Controller } from "react-hook-form";

const { ..., control } = useForm();

<Controller
  control={control}
  name="location"
  render={({ field: { onChange } }) => (
    <AutoComplete
       apiKey={GOOGLE_API_KEY}
       onPlaceSelected={(place) => onChange(place.formatted_address)}
     />
   )}
  />
/>;

onChange sends the value to the form's registry.

Taken directly from the docs here.

Using react-hook-form: v 7.39.5
react-google-autocomplete: v 2.7.0

react hook forms with react google autocomplete not showing selected value on first select

1 Answers1