Cannot read properties of undefined (reading 'getElementsByTagName')

[anatolykopyl]

Describe what you're reporting
The GMapAutocomplete component is throwing an error:

Cannot read properties of undefined (reading 'getElementsByTagName')

The error points to here:

if (_this.$slots.input) {
  const refName = _this.$slots.input()[0].props.ref
  const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName]
  if (scopedInput) {
    refInput = scopedInput.$el.getElementsByTagName('input')[0]
  }
}

How can we reproduce it?
Use the GMapAutocomplete like this:

<template>
<GMapAutocomplete @place_changed="setPlace">
  <template #input="slotProps">
    <input
      ref="input"
      v-bind="slotProps"
    >
  </template>
</GMapAutocomplete>
</template>

<script setup>
import { ref } from "vue";

const input = ref();

function setPlace(event) {
  console.log(event)
}
</script>

Full reproduction available here: https://github.com/anatolykopyl/vue-google-maps-community-fork-reproduction

Device or enviroment

• In which OS are you seeing this bug? OSX
• What is your vue version? 3.2.47
• What is your vue-google-maps-community-fork version? 0.3.1

├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[NathanAP]

Hello! Sorry for the late reply.

I'll try to reproduce it later and see what is happening. Seems like a specific situation you found hmm

[NathanAP]

Ok, this is related to #15 ):

The main problem with this part of the code is that we need to get the component that comes as slot, but we have a struggle with use a framework vs not use a framework... really want to find a solution, but it was not possible just yet.

I believe that if we find a better solution for

if (_this.$slots.input) {
  const refName = _this.$slots.input()[0].props.ref
  const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName]
  if (scopedInput) {
    refInput = scopedInput.$el.getElementsByTagName('input')[0]
  }
}

all the problem will be fixed for everyone. Let us know if you have any suggestions.

Also, I really want to make this library better, but I lack on time to organize it.

[dmoyadev]

@NathanAP I have found to have issues with this exact part of the code when using slots. After some debugging, I've come to this solution by using the scopedInput as an array:

if (_this.$slots.input) {
  const refName = _this.$slots.input()[0].props.ref
  const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName]
  if (scopedInput) {
    refInput = scopedInput[0].$el.getElementsByTagName('input')[0]
  }
}

Because that's the only way I've found to use the custom input slot.

Anyway, I'm not sure if this can introduce new errors, so that's why I'm not opening a pull request.

I have to mention that I'm using Ionic, so the getElementsByTagName('input') part doesn't really bothers me as ion-input has an input underlying, but maybe we can use a prop or something to change the tag name if that's what happening to @anatolykopyl

[NathanAP]

Hello @dmoyadev ! Thanks for the suggestion!

Just to add a context on why this is a big trouble because I don't know how much time you use this library:

• in Fawmi's version it was impossible to create a custom Autocomplete using a UI Framework (like Vuetify, PrimeVue, etc)
• this lead me to create an issue
• Fawmi never answered and then I forked
• In this fork, @websitevirtuoso made a PR to fix this problem
• Some time later, Fran (I can't ping him) added me in discord and we talk about another situation (something close to this issue)
• Composition API Support & AutoComplete Component Fix #15 was created but we never found a solution to fix both situations

I would recommend you to create a PR, there is no shame here, every suggestion is welcome. We all want to make it work without breaking anyone's code.

[palfaro91]

@dmoyadev did you end up finding a solution?

[IanMenzies]

Does the following PR resolve the issue

Tested with Vuetify and works as expected