beholdr / maska

Simple zero-dependency input mask for Vue, Svelte, Alpine.js and vanilla JS.
https://beholdr.github.io/maska/
MIT License
1.79k stars 71 forks source link

Use AbortController for input event cleanup #247

Closed le0pard closed 6 days ago

le0pard commented 2 weeks ago

Hello. Thanks for cool library.

I find out sometimes cleanup is not fully happen and dead events still exists on page after mask was destroyed. Possible reason of this issue, if on page exists DOM mutation lib, like https://github.com/bigskysoftware/idiomorph , which may use replaceChild to update elements (which may lead reference in map will not have old event).

Screenshot 2024-11-17 at 03 01 01

I decided will be faster and not loose any listener to use https://developer.mozilla.org/en-US/docs/Web/API/AbortController and just call it instead iterate over all created addEventListener (alpinejs example doing same - https://github.com/alpinejs/alpine/blob/main/packages/mask/src/index.js#L46 ).

Problem, that happy-dom not implemented AbortController for addEventListener, but it has jsdom. So I moved test, which check this functionality in separate file, where activate jsdom instead happy-dom (I tried activate jsdom for whole test suite, but one alpinejs tests is failing)

up: decided better figure out why alpine not working

up up: alpinejs test fixed

le0pard commented 2 weeks ago

I did run tests with browser mode, and alpinejs "bindings > bind completed" still failing. so looks like issues with directive, not environment

le0pard commented 2 weeks ago

Find out x-show not work correctly, so I replaced it by x-text. Now all tests should be green

beholdr commented 2 weeks ago

Hi, Oleksii

Thank you for your PR, I will examine it as soon as possible.

I like to use AbortController too. It's kind of funny that the line you a referring to is from my PR to alpinejs :) I tried to use it in maska, but found issue with happy-dom and didn't know that jsdom supports it. Thanks for this info.

beholdr commented 6 days ago

Thank you again for contribution!