From a283881306e37387408a6e7f4c0cc7e7bf94285b Mon Sep 17 00:00:00 2001 From: Alexander Shabunevich Date: Fri, 8 Dec 2023 16:04:53 +0300 Subject: [PATCH] x-mask: Cleanup of event listeners --- packages/mask/src/index.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/mask/src/index.js b/packages/mask/src/index.js index 818b1c59e..0a99dd199 100644 --- a/packages/mask/src/index.js +++ b/packages/mask/src/index.js @@ -1,6 +1,6 @@ export default function (Alpine) { - Alpine.directive('mask', (el, { value, expression }, { effect, evaluateLater }) => { + Alpine.directive('mask', (el, { value, expression }, { effect, evaluateLater, cleanup }) => { let templateFn = () => expression let lastInputValue = '' @@ -43,10 +43,16 @@ export default function (Alpine) { if (el._x_model) el._x_model.set(el.value) }) - el.addEventListener('input', () => processInputValue(el)) + const controller = new AbortController() + + cleanup(() => { + controller.abort() + }) + + el.addEventListener('input', () => processInputValue(el), { signal: controller.signal }) // Don't "restoreCursorPosition" on "blur", because Safari // will re-focus the input and cause a focus trap. - el.addEventListener('blur', () => processInputValue(el, false)) + el.addEventListener('blur', () => processInputValue(el, false), { signal: controller.signal }) function processInputValue (el, shouldRestoreCursor = true) { let input = el.value