Fix Firefox masked behavior for wrapped inputs (e.g. Vuetify)

[LCLPYT]

The problem

This patch makes the library compatible with wrapped input, specifically Vuetify. When one tried to the library on a Vuetify V-Input component:

<template>
  <v-text-field ref="input" ... />
</template>

The mask can be applied to the wrapped input with:

const input = `this.$refs['input'].$el.querySelector('input')`;
const mask = IMask(input, { mask: '00:00' });

This works completely fine in Chromium and Webkit, however on Firefox, the input events are fired in another order, which causes the mask field the be out of sync with the actual input value. One cause is, for example, that placeholders are shifted instead of being replaced.

The fix

I found a solution to the problem here. The exact problem is explained there.

Basically, the only thing I changed is, that input event listeners are not added to the element directly, but rather to the parent. Parent elements do also receive the input elements, but before the actual input does. In the case of Vuetify, this is crucial, because they have their own listeners (which are causing the de-sync) on the input element directly. I also made these listeners capturing, so that they are executed first (hopefully).

That seems to work quite well, as far as I have tested. Side-effects don't seem to appear at the moment, since the event target (the parent) is not referenced inside the event listener, but rather the input element directly (this.input).

[uNmAnNeR]

@LCLPYT thanks for your PR

As i understand current behavior is not working properly only when using with vuetify in firefox (which is a bug https://bugzilla.mozilla.org/show_bug.cgi?id=1731504). If so then it's a quite narrow case that probably should not be fixed in imask core.

In such cases i suggest to inherit from MaskElement or HTMLMaskElement and override methods that are specific in your case. For instance it could be called VuetifyMaskElement and then used normally instead of IMask in your example.

I think it's important not to lose your solution but in a form of working example on some platform (like jsfiddle, codesandbox, etc) and also put link/notes to the docs under Vue section.