The Turbo handbook mentions a “Refresh” and from what I understand, there’s no option in Turbo 8 to enable morphing for navigation events that are not Refreshes.
However, the docs don’t mention what Refreshes actually are and how to trigger them outside of <turbo-stream action="refresh"></turbo-stream>
Is there any way other than the turbo-stream action to trigger a Refresh event, especially whithin a turbo-frame?
I’ve had the same question and from my research, a refresh is triggered when posting to the current URL or performing a GET request to the current URL on a page.
If I have a search/filter form that posts back to the current URL, and the response renders a page, the contents are refreshed and my scroll position is maintained.
I think redirecting on a POST back to the previous location will also trigger a refresh.
As far as refreshing around a turbo frame:
You can trigger a refresh with Javascript with Turbo.visit(window.location.href, {action: "replace"}). You need to use action = replace because if you advance the browser history a refresh will not be performed.
I use this fact to handle form submissions in modal dialog frames by responding with HTTP status 205 (reset content) to redirect back to the current page and perform a refresh.
I hook into the turbo:submit-end event of my form, and on status 205 I visit the current location to perform a refrsh:
let response = e.detail?.fetchResponse?.response;
let status = response?.status;
let url = response?.headers?.get("Location") ?? null;
if (status === 205) {
// Reset Content - perform a refresh with turbo
Turbo.visit(window.location.href, {action: "replace"})
} else if (status === 201) {
// Created - perform a visit with turbo
if (!url) {
throw new Error("201 Created status requires a Location header")
}
Turbo.visit(url, {action: "advance"})
}
In my case, I also close the modal dialog before refreshing.
Hope this helps, I found this aspect of turbo refresh confusing as well.