Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Impossible to instantiate more than one autocomplete component on the same page due to hard set #pac-input #35

Closed
born2discover opened this issue Apr 12, 2021 · 1 comment · Fixed by #36

Comments

@born2discover
Copy link

Hello there and thank you for the component!

I've been using it in a project of mine and it works flawlessly.
Unfortunately I have recently run into an issue with the Autocomplete component.

It follows from the Autocomplete component's description in the readme that it can be used independently in an application. However, if you were to instantiate two or more instances of it, you'd get an error stating that you have a duplicate #pac-input id on the page.

After digging in, I found out that Autocomplete component hard sets that id on line 22 of Autocomplete.vue:

<input id="pac-input" ...>

 and only referencces it once on line 111:

 googleMapsReady () {
    let input = this.$el.querySelector('#pac-input')
    this.$_autocomplete = new window.google.maps.places.Autocomplete(input)
    ....
}

Considering thatgoogleMapsReady() function is invoked by Ready mixin in its mounted hook, wouldn't it be better to use a $ref instead?
That would allow for multiple components to be rendered on the same page without any modifications to the underlying functionality.

@TouchSek
Copy link
Collaborator

Fixed in release v0.1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants