Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using data-turbo-action="advance" to update URL breaks morphing #1214

Open
krschacht opened this issue Mar 1, 2024 · 0 comments
Open

Using data-turbo-action="advance" to update URL breaks morphing #1214

krschacht opened this issue Mar 1, 2024 · 0 comments

Comments

@krschacht
Copy link

krschacht commented Mar 1, 2024

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.

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 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant