Sandbox's events are being unbound

[Shane McDermed]

Running into an issue where my app's sandbox event listeners are being unbound.

It's happening when I add and remove a component as a child to another component and then add that child component back to the parent again.

It appears that it's boiling down to line 117 in mediator.js.

My steps to reproduce:

Rendering my child component

render: function(model) {
//The child component is included in this.template
this.html(this.template(model.toJSON()));
}

close: function() {
  this.$el.empty()
}

[Stephane Bellity]

Hey @mcdermed

Your components listeners are cleaned up when their sandboxes are stopped.
When you call this.html in one component, all its children will be stopped and it will look for new children to start in the new markup of its root element...

Did you expect a different behavior ?

[Shane McDermed]

Thanks for the quick reply @sbellity
Yeah I was expecting that only the children of the component would be cleaned up, not the whole app. The problem is that I have other components on the page that are being affected by the this.html method. Basically the other components that live next to the one in question are also losing the sandbox listeners.

[Shane McDermed]

Could it be that I am using the same child components in other places on the page? Should those also be affected even though they aren't a child of the one calling this.html?

[Stephane Bellity]

Definitely not. Only children should be cleaned up.
Can you show me how to reproduce this ?

[Shane McDermed]

I put together a repo where the error occurs.

After you add and remove the child divs you'll notice that subsequent attempts fail silently though aura still logs that the events were emitted.

While trying to reproduce the issue in this new repo I found that it only would happen when the children use the sandbox. Without the sandbox calls I can add and remove children without a problem.

[Stephane Bellity]

Alright, got it !

Actually the app.sandbox that you are calling from is not supposed to be used like that...
I agree it's a little misleading but app.sandbox is actually used as a "prototype" to "make" new components sandboxes at runtime.

If you want to bind something globally and in a persistent manner like you did, you can directly use app.core.mediator.sandbox.on

[Stephane Bellity]

oops... my bad it's app.core.mediator.on

[Shane McDermed]

Hey sorry for the confusion with that example. In my project I actually have the listener in a component. I have a component wrapping the whole app which is being used at a controller.
In that wrapper controller i have this

this.sandbox.on('getModel', function(data) {
        data.callback(this.collection.findWhere({uuid: data.uuid}));
      }.bind(this));

Not really sure where to go from here since it doesn't seem to be a bug with Aura anymore.
Thanks for your time and help @sbellity. I'll report back if I ever crack this problem with my project.

edit
I also updated the repo the new code using a wrapper component.