[Vue plugin] _updateValue is called on init, marking the inputs "dirty" with validators

[TheDutchCoder]

Describe the bug
Because the _updateValue method is called on component init, validators will mark the input as "dirty" (since a value is emitted). I don't really see a reason to emit a value on mount, it shouldn't have to do this.

Expected behavior
No value to be emitted on init, specially not if it didn't change from the passed in value.

Environment:

• OS: MacOS
• Browser Chrome
• Version Latest
• IMask version: 7.3.0
• Framework/plugin version if used (Nuxt 3 + Vuelidate)

[uNmAnNeR]

hi @TheDutchCoder, i don't see any _updateValue method for vue3 component which is probably used with Nuxt 3. Or am i missing something? Can you give me some example?

[TheDutchCoder]

@uNmAnNeR here:

imaskjs/packages/vue-imask/src/component3-options.ts

Line 125 in da541c6

_updateValue (): void {

[uNmAnNeR]

@TheDutchCoder it's not exposed by default. The default option for vue3 is component3-composition. Does not it work in your case? I want to remove component3-options in the next major release.

[TheDutchCoder]

@uNmAnNeR it is, it's called in _initMask which is called in the composable onMounted: https://github.com/uNmAnNeR/imaskjs/blob/master/packages/vue-imask/src/composable.ts#L91

[TheDutchCoder]

So when the component mounts, it calls _initMask, which in turn calls _updateValue, which in turn makes validators believe a user has triggered an actual input value

[uNmAnNeR]

hi @TheDutchCoder, i've checked it once again. To me it seems correct that mask emits accept event after init because value can be changed when mask is applied. Or even if the initial value is an empty string then some placeholders can still be added. Of course it's possible to track if there was a change or not but it does not make sense if it does not work for all cases.
I found the same issue for React plugin #881
And I did the same thing here - now event is passed as the last argument for all callbacks. You can check if it's undefined, then it's called on init.

[TheDutchCoder]

I don't think that callback check works with v-models. 🤷
If both React and Vue run into this problem, then maybe it's really an issue?

I'm not entirely sure what you mean by "because value can be changed when mask is applied". Isn't that just handled pre-mount for the Vue component?

Anyway, a non-touched input should not emit an event, it pretty much goes against the browser implementation of how input events are handled.

I think we'll have to find an alternative library then.

[uNmAnNeR]

@TheDutchCoder hi, thanks for the feedback.

I don't think that callback check works with v-models.

sure it does not

If both React and Vue run into this problem, then maybe it's really an issue?

yes it is and there is no silver bullet to fix it. In touched but notified vs untouched & silent i prefer to be explicit.

Isn't that just handled pre-mount for the Vue component?

it does mean that if initial input value was "A" and after mask is applied it becomes "B" then event should be emitted even if user does not touch the input.

Anyway, a non-touched input should not emit an event

i believe it should if the value is changed

I think we'll have to find an alternative library then.

you are always welcome

[TheDutchCoder]

i believe it should if the value is changed

I agree, but it fires when the value hasn't changed initially, that's the problem.

[uNmAnNeR]

@TheDutchCoder i will check

[uNmAnNeR]

@TheDutchCoder can you check vue-imask@7.5.1-alpha.0?