Custom Masked input component with internalValue (sets value.value results in Maximum call stack exceeded)

[rwfresh]

Hi all,

I have a custom Masked input component that takes a bound ref value (not useField value) and then on input, keypress debounces a handler that sets and emits the "internalValue". Inside this handler I am setting the useField value property like value.value = maskedFormattedValue. I can see my validation function runs twice and then I get a Maximum call stack exceeded Range error as a result of the value being validated (I'm guessing updated) which then triggers validation again in a loop?

the functions looping internally from vee-validate are:
klona and set.

I will try and setup an example of what I am doing but wondering if anyone has any ideas of how I can avoid this update/validation looping?

[logaretm]

Sorry for the delay, without an example it is hard to tell. But if I have to guess I would say you are mutating the value.value with handleChange in response to user input, then again to format it which would cause this.

It is better to have 2 representations of the value. The displayed one and the internal one, keep the internal one to vee-validate and use the displayed one to show to the user.

This example has this concept implemented for currency formatting.