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

hotwire-example-pagination not works with 7.2.5 #873

Closed
seb-jean opened this issue Feb 15, 2023 · 7 comments
Closed

hotwire-example-pagination not works with 7.2.5 #873

seb-jean opened this issue Feb 15, 2023 · 7 comments

Comments

@seb-jean
Copy link

seb-jean commented Feb 15, 2023

Hi,

I updated Turbo from 7.2.4 to 7.2.5 and the hotwire-example-pagination demo no longer works:
The url is modified in the browser’s path.

@seb-jean
Copy link
Author

If I remove the line https://github.com/hotwired/turbo/blob/main/src/core/frames/frame_controller.ts#L180, it works fine.
Seems it's PR related #790

@seanpdoyle
Copy link
Contributor

@seb-jean thank you for opening this issue!

The url is modified in the browser’s path.

Does the new URL reflect the path of the lazily-loaded <turbo-frame> element? Is that element rendered with a [data-turbo-action] attribute? From what I remember, that sounds like it's working as intended.

If you're able, could you try to experiment with the changes made in #430? That PR re-arranges some of the frame promotion logic, and might help resolve the underlying issue.

@seb-jean
Copy link
Author

I put the HTML code if it can help for the issue:

<turbo-frame id="notifications-page-1" target="_top">
   <div class="item">[...]</div>
   <div class="item">[...]</div>
   <div class="item">[...]</div>
   <div class="item">[...]</div>
   <div class="item">[...]</div>
   <div class="item">[...]</div>
   <div class="item">[...]</div>
   <turbo-frame id="notifications-page-2" class="group block py-6" data-turbo-action="replace" src="/notifications?page=2" loading="lazy" data-controller="element" data-action="turbo:frame-render->element#replaceWithChildren">
      <a class="hidden group-last-of-type:flex justify-center pointer-events-none" tabindex="-1" aria-hidden="true" rel="next" href="/notifications?page=2">
         <svg>[...]</svg>
      </a>
   </turbo-frame>
</turbo-frame>

@seanpdoyle
Copy link
Contributor

<turbo-frame id="notifications-page-2" class="group block py-6" data-turbo-action="replace" ...>

Rendering that <turbo-frame> element with [data-turbo-action="replace"] means that it'll update the URL when it navigates. If you don't want that behavior, you can remove that attribute.

The intention behind that example code is to update the URL's ?page= query parameter as you infinitely scroll so that if you were to refresh, you'd load the same page you were just looking at.

@seb-jean
Copy link
Author

Ok, it works perfectly.

@seanpdoyle
Copy link
Contributor

@seb-jean that's great news! Could you close this issue?

@seb-jean
Copy link
Author

Thx @seanpdoyle

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

2 participants