You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've discovered a small bug that is impacting my app. I have a page that has a form which the user submits and the response redirects back to the same URL so the page morphs. If the user loads that page directly, morphing works. But if the user loads any other page first and navigates to the desired page, then it does not morph even though the response redirects back to the same URL.
The root of the issue is that navigation happens with links that have target="frame" and the frame has data-turbo-action="advance". This is what causes morphing not to work.
Let me walk through an example to make it clear. A user opens conversation: /conversations/100/messages
They submit the form to add a new message, the POST redirects right back to the same URL, and that message morphs in.
However, if the user starts on a different URL such as: /conversations/200/messages
And they click a link which navigates to the desired /conversations/100/messages by making use of turbo-frames and action="advance". Notably, the URL successfully updates to the "100" url. And when the user submits the form, the POST redirects back to this same URL so it should morph — but morphing does not work because the URL was updated by using the action="advance" directive.
When I load my "100" page directly and submit the form, this.lastRenderedLocation.pathname and visit.location.pathname both are equal to the "100" url so the page morphs. However, when I load the "200" page and navigate to the "100" page using turbo-frames with action="advance" and then submit the form, this.lastRenderedLocation.pathname still contains the original "200" path even though the browser URL successfully updated to show the correct 100 path when I navigate. This causes isPageRefresh() to be false and the page does not morph.
Here is a video recording of the bug in action with some console logging so you can see the evidence that I used to track this down: https://share.zight.com/NQuBW4Zr
If someone can confirm this is indeed a bug and not some intended behavior, then I can tee up a PR that introduces a broken test demonstrating the issue. I am not yet sure what the fix is.
The text was updated successfully, but these errors were encountered:
I've discovered a small bug that is impacting my app. I have a page that has a form which the user submits and the response redirects back to the same URL so the page morphs. If the user loads that page directly, morphing works. But if the user loads any other page first and navigates to the desired page, then it does not morph even though the response redirects back to the same URL.
The root of the issue is that navigation happens with links that have
target="frame"
and the frame hasdata-turbo-action="advance"
. This is what causes morphing not to work.Let me walk through an example to make it clear. A user opens conversation:
/conversations/100/messages
They submit the form to add a new message, the POST redirects right back to the same URL, and that message morphs in.
However, if the user starts on a different URL such as:
/conversations/200/messages
And they click a link which navigates to the desired
/conversations/100/messages
by making use of turbo-frames and action="advance". Notably, the URL successfully updates to the "100" url. And when the user submits the form, the POST redirects back to this same URL so it should morph — but morphing does not work because the URL was updated by using theaction="advance"
directive.I reproduced the error within the
main
branch and I tracked down the source of the problem to this line of code:https://github.com/hotwired/turbo/blob/main/src/core/drive/page_view.js#L59
When I load my "100" page directly and submit the form,
this.lastRenderedLocation.pathname
andvisit.location.pathname
both are equal to the "100" url so the page morphs. However, when I load the "200" page and navigate to the "100" page using turbo-frames with action="advance" and then submit the form,this.lastRenderedLocation.pathname
still contains the original "200" path even though the browser URL successfully updated to show the correct 100 path when I navigate. This causesisPageRefresh()
to be false and the page does not morph.Here is a video recording of the bug in action with some console logging so you can see the evidence that I used to track this down:
https://share.zight.com/NQuBW4Zr
If someone can confirm this is indeed a bug and not some intended behavior, then I can tee up a PR that introduces a broken test demonstrating the issue. I am not yet sure what the fix is.
The text was updated successfully, but these errors were encountered: