Composition API Support & AutoComplete Component Fix

[Im-Fran]

To be honest I don't know if my fix will work xD I just made something that I feel should work. Anyway, feel free to provide feedback related to my fix :p

[netlify]

✅ Deploy Preview for vue-google-maps-community-fork canceled.

Name	Link
🔨 Latest commit	64e69ac
🔍 Latest deploy log	https://app.netlify.com/sites/vue-google-maps-community-fork/deploys/63724aea24a26c00076778f3

[NathanAP]

Just to add context, since we don't have an issue/discussion for this:

Fran contacted me to know if we could use this.$gmapApiPromiseLazy() in Composition API. Since our library was made in Options API by Fawmi, we don't had a proper way to call that function in Composition API without this.

His solution seems simple enough to make it work in both cases. If someone has something to add please let us know. I'll try to test this as soon as I can to accept the PR.

[Im-Fran]

I've just pushed a new commit that also fixes the autocomplete component.

[Im-Fran]

I just fixed an issue with export default (I was exporting multiple defaults xD), also I've added some checks in case someone uses a slot like:

<div ref="input"><input/></div>

[NathanAP]

Hi @websitevirtuoso , can you confirm this is working on your side as well? We don't want to break your code 😅

Edit: I created #17 as a representation of the problem Fran is fixing in this PR.

[websitevirtuoso]

I am getting next error

[websitevirtuoso]

@Im-Fran Could you give me your example of how you use autocomplete. I will try to debug it. and help in this PR

[Im-Fran]

@Im-Fran Could you give me your example of how you use autocomplete. I will try to debug it. and help in this PR

Sorry for the delay, the latest changes should work with any kind of input, the idea would be that there is a child input tag inside the input ref. Like:

<template #input="slotProps">
	<div ref="input">
		<input type="text" v-bind="slotProps"/>
	</div>
</template>

or

<template #input="slotProps">
	<input ref="input" type="text" v-bind="slotProps"/>
</template>

[websitevirtuoso]

Yes. I see the problem. Problem in usage.
We have to use prop "#input" only when we would like to use something specific. For example component as an "input".
But default component "autocomplete" already has default "input".
IN your case use doc

https://vue-google-maps-community-fork.netlify.app/components/autocomplete.html#adding-autocomplete-to-your-components

<GMapAutocomplete placeholder="This is a placeholder" @place_changed="setPlace" />

[websitevirtuoso]

In my case I use UI framework and I want that my autocomplete input had the same styles and colors as my UI lib.
And I use it like this

<GMapAutocomplete @place_changed="setPlace">
    <template #input="slotProps">
      <v-text-field
        v-bind="slotProps"
        ref="input"
        prepend-inner-icon="mdi-map-marker"
        hide-details
      />
    </template>
  </GMapAutocomplete>

[Im-Fran]

maybe there's an issue with the library. Oh, I know, since is a custom component it cannot get the tagname, cuz in the code I've added a check. If the tagname is input it wouldn't care, but only then it would try and look for the input child.

What if you wrap that v-text-field with a div, and move the ref to the div?

[websitevirtuoso]

Yes. I see. I will create PR and fix in it. But It may take some time. A bit busy with another project

[websitevirtuoso]

@Im-Fran I could debug and think you can extend your PR with 3 lines
65-67

When I pass ref on another component I have access to $el. so I can use "querySelectorAll" to find first input.
Everything others looks great

[Im-Fran]

When I pass ref on another component I have access to $el. so I can use "querySelectorAll" to find first input.

there's no need for that, that's what is happening in line 57. Because that was the initial issue, scopedInput is already the input tag if you have no parent in the input tag.

If I add that code $el would be undefined, as pointed in #17

[Im-Fran]

also that would make the line 57 useless because it would be re-assigned inside the else tag you've added.

[websitevirtuoso]

I don't want to wrap my component in div and set "ref" on it. I want to set ref on component direcly. without using $el I can't find inpu. you may try to wrap your input in a component and use it. this will lead to error

[Im-Fran]

I don't want to wrap my component in div and set "ref" on it. I want to set ref on component direcly. without using $el I can't find inpu. you may try to wrap your input in a component and use it. this will lead to error

Which framework are you using for that component? Maybe because is weird that you need to use $el with the custom component, but with native html tags it shows undefined.

[Im-Fran]

Is it vuetify?

[websitevirtuoso]

Yes This is vuetify 3

[Im-Fran]

Hey @websitevirtuoso I've been testing and it seems to be an issue with using frameworks, because if I directly use formkit it also doesn't work.

If your fix works with both the framework and no framework it would be cool if you could add it :p I think I enabled maintainers to be able to edit.

[Im-Fran]

but the main issue is that I would check that the value is undefined to use your fix, because you added it with an else tag, that causes my fix to literally do nothing but assign a temporal value 😆

[websitevirtuoso]

Yes. I see.
This way don't like me anyway. Maybe exist a way to find input without ref?
I tried but couldn't find any solution

[websitevirtuoso]

I can try to test it with Quasar Framework

[Im-Fran]

Yeah, but the problem would be that this issue happens when using frameworks. I had no time to do it but we could also have one component for frameworks, and one for native tags, or maybe a property 'is-framework' that indicates we're using a framework to use certain code. This was Nathan's idea and seems to be a good one 😃

[websitevirtuoso]

I don't agree that we need 2 components for this case.
This whole repo based on this repo
https://github.com/diegoazh/gmap-vue/blob/master/packages/gmap-vue/src/components/autocomplete-input.vue

This is gmap for vue 2. It works with native input and for frameworks as well

[NathanAP]

Thinking about it right now is not a good idea to make two components. Lets try to figure out a better way, I know we will find how to make it.

[Im-Fran]

I don't agree that we need 2 components for this case. This whole repo based on this repo https://github.com/diegoazh/gmap-vue/blob/master/packages/gmap-vue/src/components/autocomplete-input.vue

This is gmap for vue 2. It works with native input and for frameworks as well

That's the problem, the idea here is that it works with Vue 3, and this also resolves the ability to use composition API since is not recommended to be used with vue 3

[Im-Fran]

not to mention that vue 3 was released some time ago and is a good idea to support newer versions.

[NathanAP]

We also could add an option for people use with their API key in main.js. I don't really like this solution, but maybe in the worst case? :/

I'm just adding options for you guys, feel free to keep find a solution :)

[jeffbruchado]

Hey guys, are you going to keep working on this PR?

[NathanAP]

Hey Jeff! This PR is in stand by since their last conversation, I didn't put myself in the middle of the programming because they were resolving their situation. Feel free to test, add stuff or talk with us :)

[PieterBoeren]

Am I correct that the only reason this PR isn't merged is that custom input components require a wrapping div? If so, can't that just be documented as limitation/workaround for now?

[NathanAP]

This PR is now "lost" because we never reach a good solution for both situations (use autocomplete with a framework like Vuetify and be able to create our own autocomplete).

I'm almost sure that if we updated the entire code for Composition API things would work better, even if we had to work with two components or with a configuration to mark autocomplete as a custom or framework field.

[Im-Fran]

I've left the project where I was working on with this framework and this component, but if you guys want to continue what I started it's fine by me :)

[iUnknownWs]

Are there any other alternatives or workarounds available yet? I've been searching relentlessly, but I still can't find a substitute for Google Places Autocomplete.

[OsamaAnsar]

@NathanAP @Im-Fran any update on this?

[Im-Fran]

Sorry but as I stated previously, I’m no longer involved in the project where I was using this library, also I moved on from Vue 😅 I’ll just leave this PR open if someone wants to continue working on it, and if someone wants the repo I was working on, I’ll be more than happy to transfer it 😛