Usage in firefox causes infinite vue loop when v-model is used

[douglasg14b]

This is a tricky one, and I can't reproduce it outside of my environment, you might have some ideas.

If the v-model for vuetify-algolia-places is blank, and I search and select a location. Vue goes into what seems to be an infinite loop. If v-model is omitted, it will select the location as expected. If v-model is a full address it hangs immediately upon loading the page.

This also only affects development builds, not production builds.

From a profiler call stack I see that these are the primary offenders (in this order):

• updateChildComponent()
• toString()
• addDep()
• CreateComponent()

On a flame-graph I see:

It seems this is made up of, almost entirely, of DOM updates from vue.

Any idea if there is something in this component tripping off an infinite loop of some kind in Vue? Maybe centered around

Note: This is the version before adding debounce, so not related to that. This also only affects Firefox.

[douglasg14b]

I noticed if I use v-on:input two events are emitted when a location is selected instead of 1. Could this be related?

[douglasg14b]

Actually, if I display the result of the v-on:input anywhere on the page it keeps firing v-on:input infinitely...

Think I found the source. Now why is it firing infinitely? And why only if I update the view from the result of the location being selected? (Even marking a checkbox as true will cause the infinite loop...)

[douglasg14b]

It actually looks like anytime ANYTHING changes in the view, the component re-fires on:input events.

[Kocal]

Thanks for making some investigations :)

If the v-model for vuetify-algolia-places is blank

What do you mean by this? null, an empty string or an empty object?

I've tried the interactive playground on Firefox 60.6 and it's working fine. If I make the autocomplete clearable, I clear it, and I enter a new address, it works.

I noticed if I use v-on:input two events are emitted when a location is selected instead of 1. Could this be related?

Hum, that's possible, I'm seeing multiple places where input can be triggered twice:

• the @input="onInput" on <v-autocomplete> https://github.com/Kocal/vuetify-algolia-places/blob/master/src/VuetifyAlgoliaPlaces.vue#L13 and https://github.com/Kocal/vuetify-algolia-places/blob/master/src/VuetifyAlgoliaPlaces.vue#L204
• and when calling onInput manually, like:
  • https://github.com/Kocal/vuetify-algolia-places/blob/master/src/VuetifyAlgoliaPlaces.vue#L153-L154
  • https://github.com/Kocal/vuetify-algolia-places/blob/master/src/VuetifyAlgoliaPlaces.vue#L165-L166
  • maybe only this.$emit('input', place) could work