If you're end up on this page, I bet you hit the issue everybody hit at some point using Symfony UX with LiveComponents: you are trying to keep your stimulus controller content coherent after a live update from the live controller.
For starter, your issue is related to turbo morphing the HTML (it's triggered by the live controller on update). A quick fix to that could be to enforce HTML replacement instead of morphing. It's documented here.
<div
data-controller="your-controller"
data-skip-morph {# <- The required attribute #}
>
</div>
In many cases, it will not have the rendering you want. (ie: with inputs, you lose the focus)
Your component is not removed, there's not really an even you can hook on... You need to do it manually.
On your live component, add this:
<div {{attributes}} trigger-standard-controllers>
You may use a class, an id, do it your way.
And then in the controller you expect to be functional after morphing:
export default class extends Controller {
connect() {
this.doMyStuff();
}
async initialize () {
const parentComponent = this.element.closest('[trigger-standard-controllers]');
if (parentComponent) {
this.component = await getComponent(parentComponent)
this.component.on('render:finished', component => {
this.doMyStuff();
});
}
}
doMyStuff() {
// Do your job
}
}
As today not much writing exists on the topic. Here is a related issue: https://github.com/symfony/ux/issues/2048