Autoformat breaks with newer version (Maximum recursive updates exceeded in component)

[kbrgmn]

I'm using v9.0.0. When the prop :autoFormat="true" (which it is by default), then the following exception is thrown when the auto-format triggers (trigger in this case means: when entering "+491234" - when the last key ("4") is pressed):

Uncaught (in promise) Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

• Promise.then (async)
• nextTick @ chunk-2435C5CU.js?v=35ec05b2:1742
• (anonymous) @ vue-tel-input.js?v=35ec05b2:3534
• callWithErrorHandling @ chunk-2435C5CU.js?v=35ec05b2:1660
• callWithAsyncErrorHandling @ chunk-2435C5CU.js?v=35ec05b2:1667
• job @ chunk-2435C5CU.js?v=35ec05b2:3408
• callWithErrorHandling @ chunk-2435C5CU.js?v=35ec05b2:1660
• flushJobs @ chunk-2435C5CU.js?v=35ec05b2:1866
• Promise.then (async)
• queueFlush @ chunk-2435C5CU.js?v=35ec05b2:1775
• queueJob @ chunk-2435C5CU.js?v=35ec05b2:1769
• scheduler @ chunk-2435C5CU.js?v=35ec05b2:3430
• resetScheduling @ chunk-2435C5CU.js?v=35ec05b2:513
• trigger @ chunk-2435C5CU.js?v=35ec05b2:651
• set @ chunk-2435C5CU.js?v=35ec05b2:771
• createBaseVNode.onUpdate:modelValue.u..u. @ vue-tel-input.js?v=35ec05b2:3759
• (anonymous) @ chunk-2435C5CU.js?v=35ec05b2:10761

After this exception is thrown, the text field is formatted (+491234 becomes +49 1234), but inputting additional numbers to the text field (more numbers after +49 1234) is canceled (the numbers appear for a split-second and then are removed again)

Happens with both Firefox and Chrome.

When auto-format is disabled :autoFormat="false", this issue does not happen (but auto-format of course also does not work). Other reactive features, e.g. selecting the country flag based on the inputted phone number, work fine though.

[iamstevendao]

@kbrgmn thanks for raising the issue, for now, I've marked v9.0.0 as beta and v8.3.1 as latest, please revert to latest. @daniil4udo let me know if you want to look into this

[daniil4udo]

@iamstevendao yeah def :)

[daniil4udo]

@kbrgmn is it possible to make a reproduction of the bug or share the rest of the props you're passing? So far couldn't reproduce the bug.

[kbrgmn]

I'll try to create a reproduction shortly, but I can showcase quickly how I use it right now:

https://github.com/iamstevendao/vue-tel-input/assets/90308568/f9d15a28-ebb0-4e9c-9f52-5da399e7cd37

I'm using the component like this from (latest) a Nuxt 3.11.1 page / Vue 3.4.21 vue-tel-input: 9.0.0

<VueTelInput v-model="phone" :autoDefaultCountry="false"
:autoFormat="true"
:inputOptions="{placeholder: '+43', autocomplete:'tel', maxlength: 25, type: 'tel', styleClasses: 'some classes...'}"
:preferredCountries="['at', 'de', 'ch', 'li']"
:validCharactersOnly="true"
defaultCountry="at"
/>

although I just tried, and the same happened with this:

<VueTelInput v-model="phone"/>

with this being the init:

<script lang="ts" setup>
import {VueTelInput} from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';
...

The error that's being triggered after the auto-format is executed is: Uncaught (in promise) Maximum recursive updates exceeded in component <contact>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.. After the error is triggered, the malfunction happens like in the video above and no further input is possible. The phone number can only be inputted by pasting the full number in, because after the format all input seems to be cancelled or reverted.

• Running in dev mode bun dev: Cancels any input after auto format has run
• Running in prod mode bun run build && node .output/server/index.mjs: Slows down page until it crashes

[kbrgmn]

I pushed a reproduction here: https://github.com/kbrgmn/vue-tel-input-reproduction Basically, it's just the start project with dependencies: "vue-tel-input": "9.0.0" & "devDependencies": "@types/vue-tel-input": "2.1.6" and the main page with:

<template>
  <div>
      <VueTelInput v-model="phone"/>
  </div>
</template>

<script lang="ts" setup>
import {VueTelInput} from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

const phone = ref("")
</script>

[Venegrad]

Same issue

[Venegrad]

is there version script withot that issue?

[djaxho]

Same issue here on 9.1

[kbrgmn]

Seems to be fixed with #463, so per v9.1.1