fix(use-mask): changing mask breaks the model #18128

Author: rstoenescu

ui/playground/src/pages/form/input-mask.vue

@@ -3,8 +3,16 @@
     <div style="max-width: 600px" class="q-gutter-y-md">
       <h1>Input Mask</h1>
 
-      <div>Model: {{ text1 }}</div>
-      <q-input mask="date" v-model="text1" filled hint="Date ####/##/##" label="Label" />
+      <div>Model: {{ text1 }} | {{ maskedOrNotValue }}</div>
+      <q-toggle v-model="maskedOrNot" @update:model-value="toggleMask" label="Masked or not" />
+      <q-input :mask="maskedOrNotValue" v-model="text1" filled hint="Date ####/##/##" label="Label" />
+      <q-input
+        filled
+        v-model="id"
+        label="Special ID"
+        mask="#:0:0:##"
+        hint="Mask: #:0:0:##"
+      ></q-input>
 
       <div>Model: {{ text2 }}</div>
       <q-input mask="((###) ### - ####)" v-model="text2" filled hint="Phone ((###) ### - ####)" counter label="Label" />
@@ -108,7 +116,10 @@
 export default {
   data () {
     return {
-      text1: '',
+      maskedOrNot: true,
+      maskedOrNotValue: '##/##/####',
+      text1: '12/12/2023',
+      id: null,
       text2: '',
       text3: '',
       text4: '',
@@ -163,6 +174,12 @@ export default {
         return '###.#.###'
       }
     }
+  },
+
+  methods: {
+    toggleMask () {
+      this.maskedOrNotValue = this.maskedOrNotValue ? '' : '##/##/####'
+    }
   }
 }
 </script>

ui/src/components/input/use-mask.js

@@ -226,7 +226,7 @@ export default function (props, emit, emitValue, inputRef) {
     updateMaskInternalsFlag === true && updateMaskInternals()
 
     const
-      preMasked = maskValue(unmasked),
+      preMasked = maskValue(unmasked, updateMaskInternalsFlag),
       masked = props.fillMask !== false
         ? fillWithMask(preMasked)
         : preMasked,
@@ -481,11 +481,11 @@ export default function (props, emit, emitValue, inputRef) {
     }
   }
 
-  function maskValue (val) {
+  function maskValue (val, updateMaskInternalsFlag) {
     if (val === void 0 || val === null || val === '') { return '' }
 
     if (props.reverseFillMask === true) {
-      return maskValueReverse(val)
+      return maskValueReverse(val, updateMaskInternalsFlag)
     }
 
     const mask = computedMask
@@ -499,6 +499,10 @@ export default function (props, emit, emitValue, inputRef) {
 
       if (typeof maskDef === 'string') {
         output += maskDef
+
+        if (updateMaskInternalsFlag === true && valChar === maskDef) {
+          valIndex++
+        }
       }
       else if (valChar !== void 0 && maskDef.regex.test(valChar)) {
         output += maskDef.transform !== void 0
@@ -514,7 +518,7 @@ export default function (props, emit, emitValue, inputRef) {
     return output
   }
 
-  function maskValueReverse (val) {
+  function maskValueReverse (val, updateMaskInternalsFlag) {
     const
       mask = computedMask,
       firstTokenIndex = maskMarked.indexOf(MARKER)
@@ -528,6 +532,10 @@ export default function (props, emit, emitValue, inputRef) {
 
       if (typeof maskDef === 'string') {
         output = maskDef + output
+
+        if (updateMaskInternalsFlag === true && valChar === maskDef) {
+          valIndex--
+        }
       }
       else if (valChar !== void 0 && maskDef.regex.test(valChar)) {
         do {