Cannot set null or empty string on input fields with `v-facade="['#####', '#####-####']"`

[MatthewAry]

Describe the bug Please see https://github.com/RonaldJerez/vue-input-facade/issues/67 for a description. It is not possible to clear values that are bound to text input fields when using the directive strategy with a array of mask values. Factors that may play a role in this bug:

• Using a popular text input component from a component library like vuetify
• Using the directive with an array of mask strings for a value

To Reproduce Please see https://codepen.io/MatthewAry/pen/MWXOzJV for a reproduction. Please type in a value in the input field, then click the reset button. The input field only accepts number. The reset button should set the value to an empty string.

Expected behavior It's expected to see the input field clear when the reset button is clicked.

What actually happens It is not clearing. The input is reapplying the value.

Looking at Vue DevTools timeline. We can see that for some reason the input field is re-applying the value the moment it's cleared. See the video below. In my video you can also see another interesting behavior relating to how editing other input fields on the same object is causing the misbehaving field to also re-apply its value. In my video all input fields are bound to an object that looks something like this.

...
    data:() => ({
      customer: {
        name: '',
        website: '',
        contractStart: '',
        contractEnd: '',
        gracePeriod: 0,
        address: '',
        addressTwo: '',
        city: '',
        state: '',
        zip: '',
        phone: '',
        fax: '',
      }
    }),
...

And it seems that it's reacting to changes in state in a shared object. My Codepen however, is able to demonstrate that this way of structuring reactive data not a pre-requisite to reproduce this issue.

Screenshots Here is a recording of an interesting behavior related to what I am seeing. https://user-images.githubusercontent.com/157217/202818102-e3923269-ee07-4148-8eaf-b896563ce671.mov

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 107.0.5304.110 (Official Build) (x86_64)

Additional context If you need more information I would be happy to provide it.

[RonaldJerez]

This this only seem to happen when using Vuetify? Or are their other 3rd party components that you noticed this in? I have not noticed the issue when using the directive or component stand alone.

[MatthewAry]

Sorry, I don't know about the reproducibility on other components. It is likely that the OP #67 was also using Vuetify. It could also have something to do with https://github.com/RonaldJerez/vue-input-facade/commit/fe9c632dfbbc9a87cf8cee2807ab1fb3d4e7e91f where it seems some logic was added for Vuetify's sake.

If you would like, you might find some more insight into what is going on by looking at https://github.com/vuetifyjs/vuetify/blob/6e3d83f24c15bf02e120e6ee1244018dfeb78c73/packages/vuetify/src/components/VTextField/VTextField.ts

[simonmaass]

I just noticed the same problem with vuetify in combination with vue-input-facade... this is especially a pain when using something like vee-validate that checks if for example the input is min 10 characters... if the value is not null but empty string the validation will always fail and throw an error with clearing the input....

when using v-text-field with @click:clear="value = null" and v-facade="'#########'" then when clicking clear the value will reset to empty string and not null!

btw... using 3.0.0-beta.3, with vuetify 3.3.11 and vue 3.3.4