I have a controller that is firing the events: connect -> disconnect -> connect and trying to see how/why this is happening.
Is there any option that helps you trace how a controller is added and removed from the DOM?
Try adding debugger; at the top of connect() and then skipping to the second time it stops there and tracing back function calls in dev tools till you find whatever re-attached that element.
1 Like
Are you using Turbolinks? If so, this is normal when navigating to a page you’ve already visited. Turbolinks displays the cached snapshot first, then the full page once it’s loaded over the network. When that happens, the controllers on the snapshot are disconnected and new controllers for the full page are connected.
@Stav will give that a shot to get the stack trace.
@sam I am not using Turbolinks.
Rather, I have I have an outer modal element (foundation reveal) that I believe gets moved to the bottom of the body.
The modal is a jquery plugin that does some DOM operations with the outer element; so, I made the child element be a stimulus controller instead.
I was able to use this approach in one instance, but it’s causing an infinite loop of connecting/disconnecting until the browser crashes.
I may have to look at the source code of the foundation zurb plugin… but, my assumption was that the plugin just moves the content of the modal to another part of the body and initializes it with the overlay.
<div data-reveal">
<div data-controller="modal">
</div>
</div>