markbind
markbind copied to clipboard
Refactor closeable directives
Please confirm that you have searched existing issues in the repo
Yes, I have searched the existing issues
Any related issues?
No response
Tell us about your environment
Win 11
MarkBind version
5.6.0
Describe the bug and the steps to reproduce it
The v-closeable directive currently attaches mouseover and mouseout event listeners directly to the DOM element without any cleanup logic. This leads to memory leaks and duplicate event listener bindings when the directive element is toggled with v-if or when the component is unmounted and remounted. (Edge case if the directive is used in other vue components).
https://github.com/MarkBind/markbind/blob/c8f0e1a817e5b4ceb00c38ed5727c84c548fbcc9/packages/vue-components/src/directives/Closeable.js#L1-L69
Suggested Fix
- Store the event listener functions (e.g., in el._closeable) when adding them
- On unmounting, we remove the event listeners
el.removeEventListener('mouseover', el._closeable.onMouseOver);
el.removeEventListener('mouseout', el._closeable.onMouseOut);
delete el._closeable;
Expected behavior
The directive should clean up event listeners on unmount to avoid memory leaks and ensure no duplicate bindings occur.
Anything else?
No response