Update v-model value via template ref

[veronQ]

I have an address input component that loads Google places Autocomplete on first focus, and then creates an instance via the template ref of this element. When an address is selected from the Google prompt, it triggers the following:

input.value.value = instance.getPlace().formatted_address

This updates the HTML input's value but doesn't update the value of vee-validate, unless I trigger a manual action (i.e. adding a space at this end of the input).

How can I fix this?

Full code for reference

const searchRef = ref<HTMLInputElement>()

async function loadGoogleMaps() {
  await useAddress(searchRef as Ref<HTMLInputElement>)
}

<Field v-slot="{ field, value }" name="address.full">
  <label for="address" >
    Address
  </label>
  <input v-bind="field"
               id="address.full"
               ref="searchRef"
               name="address.full"
               type="text"
               @focus.once="loadGoogleMaps"
  />
</Field>

export default async function useAddress(input: Ref): Promise<void> {
  const { load } = useScriptTag(`https://maps.googleapis.com/maps/api/js?${query}`, noop, { manual: true })
  await load()

  const instance = new (window as any).google.maps.places.Autocomplete(input.value, options)

  ;(window as any).google.maps.event.addListener(instance, 'place_changed', () => {
    input.value.value = instance.getPlace().formatted_address
  })
}

[logaretm]

You have a few options here, you could either use Ref on the Field component instead of the input and call handleChange off that ref.

<Field v-slot="{ field, value }" name="address.full" ref="field">
  <label for="address" >
    Address
  </label>
  <input v-bind="field"
               id="address.full"
               ref="searchRef"
               name="address.full"
               type="text"
               @focus.once="loadGoogleMaps"
  />
</Field>

export default async function useAddress(input: Ref, field: InstanceType<typeof Field>): Promise<void> {
  // ...
  ;(window as any).google.maps.event.addListener(instance, 'place_changed', () => {
    // will update both
    field.value.handleChange(instance.getPlace().formatted_address)
  })
}

Alternatively, you could dispatch input or change events on your input with the DOM API after you've changed the value, since the field component listens to those, it will pick them up.

export default async function useAddress(input: Ref): Promise<void> {
  const { load } = useScriptTag(`https://maps.googleapis.com/maps/api/js?${query}`, noop, { manual: true })
  await load()

  const instance = new (window as any).google.maps.places.Autocomplete(input.value, options)

  ;(window as any).google.maps.event.addListener(instance, 'place_changed', () => {
    input.value.value = instance.getPlace().formatted_address
    input.value.dispatchEvent(new Event('change'));
  })
}

[veronQ]

Thank you @logaretm