use-places-autocomplete with react-hook-form v7

[nonoumasy]

@wellyshen
I'm trying to use RHF with UPA.
..

Still new to RHF 7. I got simple inputs like TextField to work but when working with other libraries such as use-places-autocomplete, I'm still unsure how to use the Controller effectively. I think the problem is that somehow the value returned by use-places-autocomplete is not wired up to RHF so its not returning it as part of the RHF data object.
I think this is because onChange is using the handleInput from UPA. How do I wire this up so that whatever handleInput returns is passed to RHF onChange?

Someone suggested:
"Your TextField is getting its value from useAutoComplete and not from RHF itself." so how would I pass it to RHF. Would I need to setup a state for this and return that seperately?

https://codesandbox.io/s/rhf-7-with-reusable-component-m9njl?file=/src/components/GooglePlacesAutocomplete.js:64-87

I did find a Youtube video which shows how to do this but for another library:
https://youtu.be/NxYUYcGBaOI?t=381

<Controller
  name="storyLocation"
  control={control}
  rules={{ required: 'storyLocation is Required' }}
  defaultValue=""
  render={({ field: { onChange, ref, name } }) => (
    <TextField
      fullWidth
      type="text"
      label={name}
      margin="normal"
      variant="outlined"
      ref={ref}
      value={value}
      onChange={handleInput}
      disabled={!ready}
      error={Boolean(errors && errors[name])}
      helperText={errors && errors[name]?.message}
    />
  )}
/>

should I do something like

render={({ field: { onChange, ref, name } }) => (
    <TextField
    {...rest}
      onChange={onChange(handleInput)}
    />
  )}

[wellyshen]

@nonoumasy Did you get the solution?

[nonoumasy]

@wellyshen not yet. I'll try again soon since I'm working on this project again.

[jacobgad]

have there been any updates? i am running into the same issue with ract-hook-form v7

[viktordanko]

+1