markbind icon indicating copy to clipboard operation
markbind copied to clipboard

Refactor closeable directives

Open gerteck opened this issue 9 months ago • 0 comments

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

gerteck avatar Mar 24 '25 01:03 gerteck