vue-input-facade icon indicating copy to clipboard operation
vue-input-facade copied to clipboard

Cannot set null value in v-model fields with mask array v-mask="['###.###.###-##', '##.###.### / ####-##']"

Open eder-ferraz-caciano opened this issue 3 years ago • 1 comments

Describe the bug

When using a mask array in the v-mask directive, it is not possible to set a null value in the v-model. This makes it impossible to reset the form data. Example of using the mask: <input v-model="CpfCnpj" type="text" v-mask="['###.###.###-##', '##.###.###/####-##']" /> <button @click="CpfCnpj = null"> Clear </button>

To Reproduce Steps to reproduce the behavior:

  1. Use a mask array in the mask directive as in the example: v-mask="['###.###.###-##', '##.###.###/## ##-##']"
  2. set value in v-model ex: <button @click="CpfCnpj = 00133266545"> Set Value </button> image
  3. Set a null value in the v-model of the component where the mask array is used. <button @click="CpfCnpj = null"> Clear </button>
  4. When setting null value in v-model, it is not applied.

Expected behavior It must be possible to set a null value in the v-model that has the mask array

Desktop (please complete the following information):

  • OS: Microsoft Windows 11 Pro - v 10.0.22000 - 22000
  • Browser [Chrome]
  • Version [v 104.0.5112.82 - 64 bits]

Additional context Only the component that uses a mascara array doesn't allow to set null value in v-model. So correctly a form is impossible.

eder-ferraz-caciano avatar Aug 22 '22 14:08 eder-ferraz-caciano

I was unable to reproduce this on both chrome or safari, setting to null worked fine in the demo page.

dynamic-masks

RonaldJerez avatar Oct 05 '22 02:10 RonaldJerez

I am having this problem. Here is my attempt to reproduce. https://codepen.io/MatthewAry/pen/MWXOzJV

MatthewAry avatar Nov 18 '22 22:11 MatthewAry

i am having the same problem with vuetify

simonmaass avatar Aug 10 '23 13:08 simonmaass