by @leastbad and @adrienpoly
Turbolinks caches a page’s state before navigating away. If you access the page again, it first displays the cached version as a preview, then refreshes the content.
Any transitional changes to the state before caching will thus lead to a flash of manipulated content.
To fix this situation, add a
teardown method to any controller that manipulates the DOM and needs to roll its changes back. Using the following snippet, placed for example in your
In a Stimulus controller, typically
disconnect is concerned with teardown code, however, it could be argued that the general lifecycle callbacks should be kept free of any code that’s not concerned with the controller and its elements per se. With Turbolinks-related teardown logic getting its own lifecycle method, there’s exactly one place where that rollback should happen, and every controller can opt in to this behavior, or not.
There’s something to say about the necessity of adding another teardown method, when all Stimulus controllers already come with a built-in
disconnect function. You might not want to duplicate this behavior, probably depending on the intensity of Turbolinks usage in your application, and how Turbolinks-related teardown logic differs from other similar concerns.