Update masked input on binded value change

src/directive.ts

@@ -5,6 +5,16 @@ type MaskaDirective = Directive<HTMLElement, MaskaDetail | undefined>
 
 const masks = new WeakMap<HTMLInputElement, MaskInput>()
 
+const checkValue = (input: HTMLInputElement): void => {
+  const value = input.dataset.maskaValue
+  if (
+    (value == null && input.value !== '') ||
+    (value != null && value !== input.value)
+  ) {
+    input.dispatchEvent(new CustomEvent('input'))
+  }
+}
+
 export const vMaska: MaskaDirective = (el, binding) => {
   const input = el instanceof HTMLInputElement ? el : el.querySelector('input')
   const opts = { ...(binding.arg as MaskInputOptions) } ?? {}
@@ -13,6 +23,8 @@ export const vMaska: MaskaDirective = (el, binding) => {
 
   const existed = masks.get(input)
   if (existed != null) {
+    checkValue(input)
+
     if (!existed.needUpdate(input, opts)) {
       return
     }
@@ -38,10 +50,8 @@ export const vMaska: MaskaDirective = (el, binding) => {
 
   masks.set(input, new MaskInput(input, opts))
 
-  // check initial value for v-model
+  // timeout to process initial v-model value
   setTimeout(() => {
-    if (input.value !== '') {
+    checkValue(input)
-      input.dispatchEvent(new InputEvent('input'))
-    }
   })
 }

src/mask-input.ts

@@ -145,6 +145,7 @@ export class MaskInput {
     }
 
     input.value = value
+    input.dataset.maskaValue = value
 
     const detail = {
       masked: mask.masked(value),

test/components/ChangeValue.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from 'vue'
+import { vMaska } from '../../src'
+
+const data = ref('123')
+</script>
+
+<template>
+  <input v-maska data-maska="#-#" v-model="data" />
+  <button @click="data = '345'">Set</button>
+</template>

test/directive.test.ts

@@ -6,6 +6,7 @@ import BindInitial from './components/BindInitial.vue'
 import BindMasked from './components/BindMasked.vue'
 import BindUnmasked from './components/BindUnmasked.vue'
 import Callbacks from './components/Callbacks.vue'
+import ChangeValue from './components/ChangeValue.vue'
 import Completed from './components/Completed.vue'
 import Config from './components/Config.vue'
 import Custom from './components/Custom.vue'
@@ -137,6 +138,19 @@ test('custom component', async () => {
   expect(wrapper.get('div').element.textContent).toBe('1-2')
 })
 
+test('change value', async () => {
+  const wrapper = mount(ChangeValue)
+  const input = wrapper.get('input')
+
+  await new Promise((r) => setTimeout(r))
+
+  expect(input.element.value).toBe('1-2')
+
+  await wrapper.get('button').trigger('click')
+
+  expect(input.element.value).toBe('3-4')
+})
+
 test('multiple inputs', async () => {
   const wrapper = mount(Multiple)
   const input = wrapper.get<HTMLInputElement>('#input1')