From 115f52d5ab5b8d0c891a3354be220139c99b15af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Thu, 9 Mar 2023 16:11:12 +0300
Subject: [PATCH] Dynamic mask change issue fixed

---
 components/inputmask/InputMask.vue | 110 ++++++++++++++++-------------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/components/inputmask/InputMask.vue b/components/inputmask/InputMask.vue
index e223a5c24..f03955e97 100755
--- a/components/inputmask/InputMask.vue
+++ b/components/inputmask/InputMask.vue
@@ -31,57 +31,15 @@ export default {
             default: false
         }
     },
+    watch: {
+        mask(newMask, oldMask) {
+            if (oldMask !== newMask) {
+                this.initMask();
+            }
+        }
+    },
     mounted() {
-        this.tests = [];
-        this.partialPosition = this.mask.length;
-        this.len = this.mask.length;
-        this.firstNonMaskPos = null;
-        this.defs = {
-            9: '[0-9]',
-            a: '[A-Za-z]',
-            '*': '[A-Za-z0-9]'
-        };
-
-        let ua = DomHandler.getUserAgent();
-
-        this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
-
-        let maskTokens = this.mask.split('');
-
-        for (let i = 0; i < maskTokens.length; i++) {
-            let c = maskTokens[i];
-
-            if (c === '?') {
-                this.len--;
-                this.partialPosition = i;
-            } else if (this.defs[c]) {
-                this.tests.push(new RegExp(this.defs[c]));
-
-                if (this.firstNonMaskPos === null) {
-                    this.firstNonMaskPos = this.tests.length - 1;
-                }
-
-                if (i < this.partialPosition) {
-                    this.lastRequiredNonMaskPos = this.tests.length - 1;
-                }
-            } else {
-                this.tests.push(null);
-            }
-        }
-
-        this.buffer = [];
-
-        for (let i = 0; i < maskTokens.length; i++) {
-            let c = maskTokens[i];
-
-            if (c !== '?') {
-                if (this.defs[c]) this.buffer.push(this.getPlaceholder(i));
-                else this.buffer.push(c);
-            }
-        }
-
-        this.defaultBuffer = this.buffer.join('');
-        this.updateValue(false);
+        this.initMask();
     },
     updated() {
         if (this.isValueUpdated()) {
@@ -500,6 +458,58 @@ export default {
                 this.focusText = this.$el.value;
             }
         },
+        initMask() {
+            this.tests = [];
+            this.partialPosition = this.mask.length;
+            this.len = this.mask.length;
+            this.firstNonMaskPos = null;
+            this.defs = {
+                9: '[0-9]',
+                a: '[A-Za-z]',
+                '*': '[A-Za-z0-9]'
+            };
+
+            let ua = DomHandler.getUserAgent();
+
+            this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
+
+            let maskTokens = this.mask.split('');
+
+            for (let i = 0; i < maskTokens.length; i++) {
+                let c = maskTokens[i];
+
+                if (c === '?') {
+                    this.len--;
+                    this.partialPosition = i;
+                } else if (this.defs[c]) {
+                    this.tests.push(new RegExp(this.defs[c]));
+
+                    if (this.firstNonMaskPos === null) {
+                        this.firstNonMaskPos = this.tests.length - 1;
+                    }
+
+                    if (i < this.partialPosition) {
+                        this.lastRequiredNonMaskPos = this.tests.length - 1;
+                    }
+                } else {
+                    this.tests.push(null);
+                }
+            }
+
+            this.buffer = [];
+
+            for (let i = 0; i < maskTokens.length; i++) {
+                let c = maskTokens[i];
+
+                if (c !== '?') {
+                    if (this.defs[c]) this.buffer.push(this.getPlaceholder(i));
+                    else this.buffer.push(c);
+                }
+            }
+
+            this.defaultBuffer = this.buffer.join('');
+            this.updateValue(false);
+        },
         isValueUpdated() {
             return this.unmask ? this.modelValue != this.getUnmaskedValue() : this.defaultBuffer !== this.$el.value && this.$el.value !== this.modelValue;
         }