[#511] Compare resolved old and new masks after component update when deciding if the value should be updated

src/__tests__/index.test.js

@@ -243,6 +243,17 @@ describe('directive usage', () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.$el.value).toBe('19:32');
   });
+
+  it('should not trigger input events if resolved mask is the same as previous one', async () => {
+    const wrapper = mountWithMask({
+      props: { triggerUpdate: { required: false } },
+      data: () => ({ mask: () => [/\d/, /\d/], value: null }),
+      template: '<input v-mask="mask" v-model="value" v-on:input="$emit(\'input\', $event)" />',
+    });
+
+    await wrapper.setProps({ triggerUpdate: true });
+    expect(wrapper.emitted().input).toBeFalsy();
+  });
 });
 
 describe('filter usage', () => {

src/directive.js

@@ -20,6 +20,15 @@ function triggerInputUpdate(el) {
   trigger(el, 'input');
 }
 
+function updateElementWithMaskedValue(el, maskedValue) {
+  if (maskedValue === el.value) {
+    return;
+  }
+
+  el.value = maskedValue;
+  triggerInputUpdate(el);
+}
+
 /**
  * Event handler
  * @param {HTMLInputElement} el
@@ -35,8 +44,8 @@ function updateValue(el, force = false) {
 
   if ((force || isUpdateNeeded) && mask) {
     const { conformedValue } = conformToMask(value, mask, { guide: false });
-    el.value = conformedValue;
-    triggerInputUpdate(el);
+
+    updateElementWithMaskedValue(el, conformedValue);
   }
 
   options.partiallyUpdate(el, { previousValue: value });
@@ -95,6 +104,22 @@ function maskToString(mask) {
   return filteredMaskArray.toString();
 }
 
+/**
+ * Check if previous mask has been different than current one
+ * @param {String|Array.<String|RegExp>} mask
+ */
+function hasMaskFromBindingChanged(el, oldValue, currentValue) {
+  const previousMask = isFunction(oldValue)
+    ? maskToString(oldValue(options.get(el).previousValue))
+    : maskToString(oldValue);
+
+  const currentMask = isFunction(currentValue)
+    ? maskToString(currentValue(el.value))
+    : maskToString(currentValue);
+
+  return previousMask !== currentMask;
+}
+
 /**
  * Create the Vue directive
  * @param {Object}                  directiveOptions
@@ -139,8 +164,7 @@ export function createDirective(directiveOptions = {}) {
     componentUpdated(el, { value, oldValue }) {
       el = queryInputElementInside(el);
 
-      const isMaskChanged = isFunction(value)
-        || maskToString(oldValue) !== maskToString(value);
+      const isMaskChanged = hasMaskFromBindingChanged(el, oldValue, value);
 
       if (isMaskChanged) {
         updateMask(el, value, instanceMaskReplacers);