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.

Sign up for GitHub

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

Jump to bottom

Handle back navigation from page without VT #7750

Merged
merged 2 commits into from
Jul 21, 2023
Merged

Handle back navigation from page without VT #7750

merged 2 commits into from
Jul 21, 2023

Conversation

matthewp
Copy link
Contributor

Changes

Testing

  • New E2E case added

Docs

N/A, bug fix

@changeset-bot
Copy link

changeset-bot bot commented Jul 21, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: d2e9ab4

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Jul 21, 2023
matthewp
matthewp commented Jul 21, 2023
View reviewed changes
packages/astro/components/ViewTransitions.astro
if (!transitionEnabledOnThisPage()) {
// The current page doesn't haven't View Transitions,
// respect that with a full page reload
location.reload();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was unsure if this was the best way but from research it seems like it probably is? popstate is a weird API.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose that's fine

@matthewp matthewp merged commit 201d32d into main Jul 21, 2023
@matthewp matthewp deleted the back-from-no-vt-page branch July 21, 2023 14:40
@astrobot-houston astrobot-houston mentioned this pull request Jul 21, 2023
Merged
@W1M0R
Copy link
Contributor

W1M0R commented Sep 25, 2024

I am using htmx in an Astro component. Htmx does history management and can restore state when pressing the back button. However, the Astro popstate implementation reloads the page before Htmx gets an opportunity to do its work. I'm still investigating a solution, but I think that I might either need to trick Astro into not doing a reload (maybe just enable ViewTransitions), or somehow unregister the Astro popstate handler to prevent interference.

@matthewp @ematipico What do you think would be a good approach to deal with this situation?

Here is more information:

The hx-push-url attribute allows you to push a URL into the browser location history. This creates a new history entry, allowing navigation with the browser’s back and forward buttons. htmx snapshots the current DOM and saves it into its history cache, and restores from this cache on navigation.

  1. https://htmx.org/attributes/hx-push-url/
  2. https://htmx.org/attributes/hx-boost/

@W1M0R
Copy link
Contributor

W1M0R commented Sep 25, 2024

Here is a debugging screenshot that might help:

image

Notice that Unpoly, HTMX and Astro are responding to the popstate event (see the Global Listeners tab).

Also notice how Unpoly first checks to see if the state was saved by it or someone else. Maybe Astro could also do something similar?

@W1M0R
Copy link
Contributor

W1M0R commented Sep 25, 2024

HTMX also does a similar check:

image

@W1M0R
Copy link
Contributor

W1M0R commented Sep 25, 2024

Here is where the breakpoint hits:

image

Notice that event.state.htmx is set to true.

@W1M0R
Copy link
Contributor

W1M0R commented Sep 25, 2024

One "workaround" might be to set the astro-view-transitions-fallback to none:

image

image

@W1M0R
Copy link
Contributor

W1M0R commented Sep 25, 2024 •
edited
Loading

It turns out that I had <ViewTransitions /> in my <head>. Removing it resolved the issue for me. I also had to remove the import { ViewTransitions } from "astro:transitions"; from my Layout component.

@W1M0R
Copy link
Contributor

W1M0R commented Oct 11, 2024

For anyone looking to improve the onpopstate handling, here is a clip on the handler: https://youtu.be/javGxN-h9VQ?si=cYxRkzQnlO7Y9DGr&t=1080

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ematipico ematipico ematipico approved these changes

Assignees
No one assigned
Labels
pkg: astro Related to the core `astro` package (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Enabling view transitions breaks back functionality
3 participants
@matthewp @W1M0R @ematipico