fix #989

uNmAnNeR · Mar 20, 2024 · d6c7603 · d6c7603
1 parent 81e4565
commit d6c7603
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 29 deletions.
diff --git a/packages/imask/src/controls/input.ts b/packages/imask/src/controls/input.ts
@@ -65,7 +65,6 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
     this._bindEvents();
 
     // refresh
-    this.updateValue();
     this._onChange();
   }
 
@@ -209,6 +208,8 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
   updateValue () {
     this.masked.value = this.el.value;
     this._value = this.masked.value;
+    this._unmaskedValue = this.masked.unmaskedValue;
+    this._rawInputValue = this.masked.rawInputValue;
   }
 
   /** Syncronizes view from model value, fires change events */
@@ -360,9 +361,7 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
 
   /** Handles view change event and commits model value */
   _onChange () {
-    if (this.displayValue !== this.el.value) {
-      this.updateValue();
-    }
+    if (this.displayValue !== this.el.value) this.updateValue();
     this.masked.doCommit();
     this.updateControl();
     this._saveSelection();

diff --git a/packages/vue-imask/src/component3-composition.ts b/packages/vue-imask/src/component3-composition.ts
@@ -74,7 +74,7 @@ export default defineComponent<MaskProps>({
     const ptyped = toRef(props, 'typed');
 
     masked.value = pmodelValue.value || pvalue.value || '';
-    unmasked.value = punmasked.value;
+    unmasked.value = punmasked.value || '';
     typed.value = ptyped.value;
 
     watch(pvalue, v => masked.value = v);

diff --git a/packages/vue-imask/src/composable.ts b/packages/vue-imask/src/composable.ts
@@ -38,17 +38,20 @@ function useIMask<
   const mask: Ref<InputMask<Opts> | undefined> = ref();
   const masked: Ref<InputMask<Opts>['value']> = ref('');
   const unmasked: Ref<InputMask<Opts>['unmaskedValue']> = ref('');
-  const typed: Ref<InputMask<Opts>['typedValue']> = ref(null);
-  const initialized = ref(false);
+  const typed: Ref<InputMask<Opts>['typedValue']> = ref();
   let $el: MaskElement | undefined;
-  let $lastAcceptedValue: InputMask<Opts>['value'] | undefined;
-  let $lastAcceptedUnmaskedValue: InputMask<Opts>['unmaskedValue'] | undefined;
-  let $lastAcceptedTypedValue: InputMask<Opts>['typedValue'] | undefined;
+  let $lastAcceptedValue: InputMask<Opts>['value'] | undefined = masked.value;
+  let $lastAcceptedUnmaskedValue: InputMask<Opts>['unmaskedValue'] | undefined = unmasked.value;
+  let $lastAcceptedTypedValue: InputMask<Opts>['typedValue'] | undefined = typed.value;
 
-  function _onAccept (event?: InputEvent) {
+  function storeLastAcceptedValues () {
     $lastAcceptedTypedValue = typed.value = (mask.value as InputMask<Opts>).typedValue;
     $lastAcceptedUnmaskedValue = unmasked.value = (mask.value as InputMask<Opts>).unmaskedValue;
     $lastAcceptedValue = masked.value = (mask.value as InputMask<Opts>).value;
+  }
+
+  function _onAccept (event?: InputEvent) {
+    storeLastAcceptedValues();
 
     if (emit) {
       emit('accept', masked.value, event);
@@ -79,40 +82,53 @@ function useIMask<
       .on('accept', _onAccept)
       .on('complete', _onComplete);
 
-    _onAccept();
+    updateUnmaskedValue();
+    updateMaskedValue();
+    updateTypedValue();
 
-    initialized.value = true;
+    storeLastAcceptedValues();
   }
 
   function _destroyMask () {
-    if (!initialized.value) return;
     mask.value?.destroy();
     mask.value = undefined;
   }
 
   onMounted(_initMask);
   onUnmounted(_destroyMask);
 
-  watch(unmasked, () => {
-    if (mask.value && initialized.value) {
-      if ($lastAcceptedUnmaskedValue !== unmasked.value) mask.value.unmaskedValue = unmasked.value;
-      $lastAcceptedUnmaskedValue = undefined;
+  const updateUnmaskedValue = () => {
+    if (!mask.value) return;
+
+    if ($lastAcceptedUnmaskedValue !== unmasked.value) {
+      mask.value.unmaskedValue = unmasked.value;
+      if (mask.value.unmaskedValue !== unmasked.value) _onAccept();
     }
-  });
+    $lastAcceptedUnmaskedValue = undefined;
+  };
+  watch(unmasked, updateUnmaskedValue);
 
-  watch(masked, () => {
-    if (mask.value && initialized.value) {
-      if ($lastAcceptedValue !== masked.value) mask.value.value = masked.value;
-      $lastAcceptedValue = undefined;
+  const updateMaskedValue = () => {
+    if (!mask.value) return;
+
+    if ($lastAcceptedValue !== masked.value) {
+      mask.value.value = masked.value;
+      if (mask.value.value !== masked.value) _onAccept();
     }
-  });
+    $lastAcceptedValue = undefined;
+  };
+  watch(masked, updateMaskedValue);
 
-  watch(typed, () => {
-    if (mask.value && initialized.value) {
-      if ($lastAcceptedTypedValue !== typed.value) mask.value.typedValue = typed.value;
-      $lastAcceptedTypedValue = undefined;
+  const updateTypedValue = () => {
+    if (!mask.value) return;
+
+    if ($lastAcceptedTypedValue !== typed.value) {
+      mask.value.typedValue = typed.value;
+      if (mask.value.typedValue !== typed.value) _onAccept();
     }
-  });
+    $lastAcceptedTypedValue = undefined;
+  }
+  watch(typed, updateTypedValue);
 
   watch([el, _props], () => {
     const $newEl = el.value;