V5 (Core) - Detach event listeners inside popup/modal

1

I usually use event listeners in components, by attaching them in pageInit:

this.$app.on('my-event', this.my_event_handler);

and detaching them in beforeRemove:

this.$app.off('my-event', this.my_event_handler);

Usually this works excellent. But whenever a component is loaded inside a popup (or other routable modal), the beforeRemove or destroy event handlers of the page component are never called when the popup is closed. So the components are not garbage collected once the popup is closed, as the event handlers are still attached. Also each time the same page is loaded, a new handler is attached to the same event.

Currently, I use a workaround, by moving the .off(…) inside a component method “detach_events”, and bind this method on beforeRemove, and on this.$app.on(‘popupClosed’)

While this works, it feels like an ugly workaround. And it is not completely correct from architectural view, as the popupClosed could be triggered by any second level popup.

Any ideas in the good direction?

2

Did you try with “Popup Events”?

“close” event should work in your uses case

3

Yes I did try that. It works the same as popupClosed, although it doesn’t feel right as well.

The solution I was looking for, is that all page components inside a routable popup could receive a ‘destroyed’ or ‘beforeRemove’ event, when a popup is closed.