Event listeners still in-tact after destroying (blur)

[MadLittleMods]

Version

2.3.3

Reproduction link

https://codepen.io/MadLittleMods/pen/YQPjXZ/

Steps to reproduce

1. Create a Vue component with a @blur event listener
2. Focus the element with the @blur listener
3. Destroy the Vue component (vm.$destroy(), vm.$off(), vm.$el.remove(), vm = null)
4. Click away to blur the element and see the @blur method get called

What is expected?

The @blur event listener is not called.

---

In the minimal example, I expect the vm and listeners to get garbage collected after the setTimeout call with just a vm.$destroy().

I expect the explicit vm.$off() to remove the listeners.

Doing vm.$el.remove() fires @blur but does stop further calls after that (you can't focus it again to blur).

I expect vm = null; to kick things more into garbage collection mode but doesn't seem to affect the result.

What is the correct way to clean up listeners on a Vue component after destroying?

What is actually happening?

The @blur event listener gets called.

---

I ran into this while writing some Jasmine tests for a Vue component. I am focusing an input, vm.$destroy() in the Jasmine afterEach hook, then in another unrelated test, something else is focused causing a blur and a NPE is thrown.

• https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1797/diffs?diff_id=4793553#3bf3f72ab5ca507f97fde9223221aeeb70dd73c0_0_102
  • https://gitlab.com/gitlab-org/gitlab-ee/builds/17927860

---

Related Issues

• DOM listeners haven't been removed when vm is destroyed, is this expected? #5187
• $destroy does remove allocated objects? #4582

[yyx990803]

As explained in previous issues, this is expected behavior.$destroy only controls the JS side of things related to the component - there's no guarantee made about the DOM that is left behind. On the other hand, you should not attempt to reuse the DOM or leave it in the document. If you remove the DOM, they can get properly garbage collected.

[MadLittleMods]

@yyx990803

Why does vm.$off() not remove the event listeners? Perhaps it only works with vm.$on(...) added listeners vs template bindings.

Destroying the DOM element calls the @blur listener if it has focus. There seems to be no way to focus an element and cleanup the Vue component listeners without causing the Vue @blur to be called.

This means that the test needs to blur the element before cleaning up or make the method less susceptible to NPE this.$refs.input.value in my actual case.

[yyx990803]

vm.$off removes custom Vue event listeners, not DOM listeners.

And yes, you should blur before cleaning up.