Bug: GmapAutocomplete @place_changed not firing

[jpschutte]

Please complete all sections that you can but please don't remove any section, otherwise the bot will close your issue because it doesn't meet our issue template (you can remove this comment)

Describe the bug

If using a slot, the @place_changed no longer works. However, just using props without using the default slot works and fires the place_changed event.

A clear and concise description of what the bug is.

Works

<GmapAutocomplete
  :value="addressInput"
  placeholder="This is a placeholder text"
  @place_changed="handlePlaceChange"
  :select-first-on-enter="true"
/>

Does not work

<GmapAutocomplete @place_changed="handlePlaceChange">
  <template v-slot:default="slotProps">
    <v-text-field
      :value="addressInput"
      ref="autocomplete"
      class="address-search__input"
      id="map-search"
      label="Enter your address"
      placeholder=""
      required
      v-on:listeners="slotProps.listeners"
      v-on:attrs="slotProps.attrs"
    />
  </template>
</GmapAutocomplete>

I think the documentation could be wrong? Where I think it should be v-on="slotProps.$listeners" and v-bind="slotProps.$attrs". But this way also doesn't work. I've also tried just using a <input/> instead of <v-text-field/> but this also made no difference.

<GmapAutocomplete @place_changed="handlePlaceChange">
  <template v-slot:default="slotProps">
    <v-text-field
      :value="addressInput"
      ref="autocomplete"
      class="address-search__input"
      id="map-search"
      label="Enter your address"
      placeholder=""
      required
      v-on="slotProps.$listeners"
      v-bind="slotProps.$attrs"
    />
  </template>
</GmapAutocomplete>

To reproduce

Steps to reproduce the behavior:

1. Make use of GmapAutocomplete.
2. Create a method to handle a place_changed event.
3. Make use of the default slot and try to get the place_changed event to fire.

Expected behavior

The method that is attached to the place_changed event should fire when using a default slot.

Current behavior

The method that is attached to the place_changed event does not fire when using a default slot.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information)

• MacOS
• Chrome
• Version 103

Smartphone (please complete the following information)

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

Versions

• Node: 14.17.0
• NPM: 8.1.4
• Yarn:

Package manager

• [X] NPM
• [ ] Yarn

Plugin version

• [X] 3.5.3
• [ ] 1.4.x
• [ ] 1.2.x
• [ ] 1.0.x

[davydnorris]

I have the following code in my project and it is working fine:

            <gmap-autocomplete
              :component-restrictions="{ country: currentOrg.address.countryCode }"
              :fields="['name', 'address_components', 'formatted_address', 'geometry']"
              @place_changed="setPlace"
            >
              <template
                #input="{ listeners, attrs }"
              >
                <v-text-field
                  ref="input"
                  :prepend-icon="icons.maps"
                  placeholder="Enter site name or address"
                  v-bind="attrs"
                  v-on="listeners"
                />
              </template>
            </gmap-autocomplete>

[davydnorris]

@jpschutte looking at your code you have your ref name mismatched, you must either use the name "input" or you must explicitly provide the ref name using the child-ref-name prop on the autocomplete

[tux2nicolae]

@davydnorris you seem to use #input instead of the #default slot, in v2 the slot was renamed https://github.com/diegoazh/gmap-vue/blob/2384ea756a532c13e5a2fec5d7f7a491b30e22f6/packages/gmap-vue/src/components/autocomplete-input.vue#L9 I am missing something?

[davydnorris]

@tux2nicolae it's not the slot it's the ref name on the customised input component that's important. You either have to change your ref from "autocomplete" to "input", or you have to use the prop slotRefName="autocomplete" to explicitly declare what ref you are using