Bug - Vue Model not updating

[g0ld3neag1e]

Because Vue Model is not triggered with external value changes i.e. element.value = "", the bound value on Vue is no updated after a mask is complete and if values are entered still.

I found this when using a phone mask "(999) 999-9999". The mask would work fine, but if I hit an extra key after the last character the Vue data would be "(999) 999-9999X".

To solve this, I added updated InputMask.updateControl to :

function updateControl() {
                    var newUnmaskedValue = this.masked.unmaskedValue;
                        var newValue = this.masked.value;
                    var isChanged = this.unmaskedValue !== newUnmaskedValue || this.value !== newValue;
                    this._unmaskedValue = newUnmaskedValue;
                        this._value = newValue;
                        if (this.el.value !== newValue) {
                            this.el.value = newValue;
                            // If the mask has completed and keys are still entered, manually trigger Vue to update
                            if (this.masked.isComplete) this.el.input.dispatchEvent(new Event('input'));
                        }
                    if (isChanged) this._fireChangeEvents();
}

[chasegiunta]

@g0ld3neag1e also seeing this. Is the above a fix you can PR?

[g0ld3neag1e]

@chasegiunta My fix works as expected if using Directives only, but it creates a glitch if also using the Component side. I found that when using a number mask and deleting the value from the input this creates a loop that produces a max stack error. I mainly was putting this on the radar, as I don't have time to track that issue down. So, for now, I wouldn't want to add it to the main branch.

[chasegiunta]

@g0ld3neag1e Cool. I ended up ditching v-model helper for this case, listening input, and doing this as a workaround, with imask's complete event:

onInput(event) {
      if ((this.maskComplete) && (event.target.value.length > this.mask.mask.length))  {
          return
      }

      this.value = event.target.value
    }

[sem4phor]

@g0ld3neag1e Can you describe where/how you called this method? I am using the directive and struggeling to get this wokring.

[uNmAnNeR]

Hello guys, can you provide some fiddle to run?

[g0ld3neag1e]

Refer to "How to Use: 1"

https://jsfiddle.net/g0ld3neag1e/ev8k0goy/

[g0ld3neag1e]

@sem4phor I downloaded a copy of the iMask JS and updated the function I have listed above at line, roughly, 3465.

Hope that helps.

P.S. This is not ideal fix as it causes an error on the component side, and it detaches your project from the cdn and future updates.

[chasegiunta]

Here's a codesandbox showing the issue
https://codesandbox.io/s/vue-template-h44nu?fontsize=14

[g0ld3neag1e]

@sem4phor take a look at #249, i did pretty much the same thing, just using the InputMask library functions.

[sem4phor]

@uNmAnNeR Any idea when its possible for you to look into this and #249? Do you need more informations or how could we help?

[uNmAnNeR]

@sem4phor
for me it seems that now imask vue directive is broken. My suggestion is to use imask component. Vue has very weak support for customizing directives.
Still if you think it's a good idea to have working directive rather than removing it at all, I would be nice if you refer to some projects with similar functionality. I am not an active Vue user, for me it's very time consuming to get into Vue internals to hack around, every time just like from scratch again.
I don't mind to fix it, but have no free time, just like everyone of you i suppose. This should be reliable solution if it is supported by framework itself. If not, then please don't propose hacks like suggested above. I will not include it, sorry. This is about bad framework design, i'm not gonna support it hacking around.