fix(directive.js): fix handling events for multiple elements (#41)

Problem: If two input elements with the v-facade directive are both in the
same root element, then the event handlers for each will trigger for ALL
inputs on the elements. This can be problematic in cases where an input
event cannot or should not be handled by the masking function, ie
when one input is masked and the other is not.

Solution: Add a check to the event handler to confirm that the event
target is in fact the element that was initially target by the v-facade we care about.

Author: dougalg

src/directive.js

@@ -19,7 +19,12 @@ export default {
     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)
+    const handler = (e) => {
+      if (e.target !== el) {
+        return
+      }
+      core.inputHandler(e, el)
+    }
 
     handlerOwner.addEventListener('input', handler, true)
 

tests/directive.test.js

@@ -24,6 +24,7 @@ describe('Directive', () => {
 
   afterEach(() => {
     jest.restoreAllMocks()
+    inputListener.mockReset()
     wrapper && wrapper.destroy()
   })
 
@@ -204,4 +205,41 @@ describe('Directive', () => {
       expect(wrapper.element.setSelectionRange).not.toBeCalled()
     })
   })
+
+  describe('multiple inputs, one facade', () => {
+    let otherInput
+    let facadeInput
+
+    beforeEach(() => {
+      const template = `<div id="wrapper">
+      <input id="first" v-facade="mask" value="" @input="inputListener" />
+      <input id="second" />
+      </div>`
+      buildWrapper({ template })
+      otherInput = wrapper.find('#second')
+      facadeInput = wrapper.find('#first')
+    })
+
+    test('should not emit for other inputs', async () => {
+      otherInput.setValue('1122')
+
+      expect(otherInput.element.value).toBe('1122')
+      expect(facadeInput.element.value).toBe('')
+      expect(inputListener).toBeCalledTimes(0)
+    })
+
+    test('should still handle inputs for the main element', async () => {
+      facadeInput.setValue('1122')
+
+      expect(otherInput.element.value).toBe('')
+      expect(facadeInput.element.value).toBe('11.22')
+
+      otherInput.setValue('2233')
+
+      expect(otherInput.element.value).toBe('2233')
+      expect(facadeInput.element.value).toBe('11.22')
+
+      expect(inputListener).toBeCalledTimes(1)
+    })
+  })
 })