fix: firefox issue where masked value can overflow

* add input event listener to parentElement to ensure proper execution order

* do not store handler on config object

Author: tskimmett

src/directive.js

@@ -4,15 +4,28 @@ const CONFIG_KEY = core.CONFIG_KEY
 export default {
   bind: (el, { value, modifiers }, vnode) => {
     el = core.getInputElement(el)
-    el.addEventListener('input', core.inputHandler, true)
-
     const config = core.normalizeConfig(value, modifiers)
     el[CONFIG_KEY] = { config }
 
     // set initial value
     core.updateValue(el, vnode, { force: config.prefill })
   },
 
+  inserted: (el) => {
+    el = core.getInputElement(el)
+    const config = el[CONFIG_KEY]
+    // prefer adding event listener to parent element to avoid Firefox bug which does not
+    // execute `useCapture: true` event handlers before non-capturing event handlers
+    const handlerOwner = el.parentElement || el
+
+    // use anonymous event handler to avoid inadvertently removing masking for all inputs within a container
+    const handler = (e) => core.inputHandler(e)
+
+    handlerOwner.addEventListener('input', handler, true)
+
+    config.cleanup = () => handlerOwner.removeEventListener('input', handler, true)
+  },
+
   update: (el, { value, oldValue, modifiers }, vnode) => {
     el = core.getInputElement(el)
 
@@ -24,5 +37,7 @@ export default {
     }
   },
 
-  unbind: (el) => el.removeEventListener('input', core.inputHandler, true)
+  unbind: (el) => {
+    core.getInputElement(el)[CONFIG_KEY].cleanup()
+  }
 }

tests/directive.test.js

@@ -15,7 +15,7 @@ describe('Directive', () => {
       directives: { facade },
       methods: { inputListener },
       data() {
-        return { mask }
+        return { mask, flag: true }
       }
     }
 
@@ -57,6 +57,29 @@ describe('Directive', () => {
     expect(wrapper.find('#second').element.value).toBe('3344')
   })
 
+  test('Removing a masked input from the DOM should not impact other masked inputs in the same container', async () => {
+    const template = `<div id='owner'>
+        <input v-facade="mask" id="first" />
+        <input v-if="flag" v-facade="mask" id="second" />
+      </div>`
+
+    buildWrapper({ template, mask: '##.##' })
+
+    wrapper.find('#first').setValue('1111')
+    wrapper.find('#second').setValue('1111')
+
+    expect(wrapper.find('#first').element.value).toBe('11.11')
+    expect(wrapper.find('#second').element.value).toBe('11.11')
+
+    // remove #second input from DOM, triggering directive unbind
+    await wrapper.setData({ flag: false })
+    expect(wrapper.find('#second').exists()).toBeFalsy()
+
+    // ensure #first input is still being masked
+    wrapper.find('#first').setValue('1122')
+    expect(wrapper.find('#first').element.value).toBe('11.22')
+  })
+
   test('Should update element value on input', async () => {
     buildWrapper({ value: 1234 })
     expect(wrapper.element.value).toBe('12.34')