update event listiner

Author: dipaksarkar

src/core.ts

@@ -169,18 +169,14 @@ export function inputHandler(event: CustomInputEvent) {
 /**
  * Blur event handler
  *
- * @param {Event} event The event object
+ * @param {CustomInputEvent} event The event object
  */
-export function blurHandler(event: Event) {
-  const { target } = event as CustomInputEvent
-
-  // since we will be emitting our own custom input event
-  // we can stop propagation of this native event
-  event.stopPropagation()
+export function blurHandler(event: CustomInputEvent) {
+  const { target } = event
 
   const { oldValue } = target
 
-  updateValue(target, null, { force: true, emit: false, clean: true })
+  updateValue(target, null, { force: true, clean: true })
 
   if (oldValue !== target.value) {
     target.dispatchEvent(InputEvent('change'))
@@ -189,6 +185,8 @@ export function blurHandler(event: Event) {
 
 /**
  * Keydown event handler
+ *
+ * @param {KeyboardEvent} event The event object
  */
 export function keydownHandler(event: KeyboardEvent, el: CustomInputElement) {
   const { options } = el

src/directive.ts

@@ -36,15 +36,31 @@ export default {
       core.inputHandler(e as core.CustomInputEvent)
     }
 
-    handlerOwner.addEventListener('input', oninput, true)
-
-    el.onblur = (e) => core.blurHandler(e)
+    const onblur = (e: Event) => {
+      if (e.target !== el) {
+        return
+      }
+      core.blurHandler(e as core.CustomInputEvent)
+    }
 
     // check decimal key and insert to current element
     // updated cursor position after format the value
-    el.onkeydown = (e) => core.keydownHandler(e, el)
+    const onkeydown = (e: Event) => {
+      if (e.target !== el) {
+        return
+      }
+      core.keydownHandler(e as KeyboardEvent, el)
+    }
 
-    el.cleanup = () => handlerOwner.removeEventListener('input', oninput, true)
+    handlerOwner.addEventListener('input', oninput, true)
+    handlerOwner.addEventListener('blur', onblur, true)
+    handlerOwner.addEventListener('keydown', onkeydown, true)
+
+    el.cleanup = () => {
+      handlerOwner.removeEventListener('input', oninput, true)
+      handlerOwner.removeEventListener('blur', onblur, true)
+      handlerOwner.removeEventListener('keydown', onkeydown, true)
+    }
   },
 
   updated: (el: core.CustomInputElement, { value, oldValue, modifiers }: DirectiveBinding, vnode: VNode) => {