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

Links with hash are not triggering popstate events #4905

Closed
3 tasks
posva opened this issue Sep 18, 2020 · 2 comments
Closed
3 tasks

Links with hash are not triggering popstate events #4905

posva opened this issue Sep 18, 2020 · 2 comments

Comments

@posva
Copy link
Contributor

posva commented Sep 18, 2020

🐛 bug report

Preflight Checklist

  • I have read the Contributing Guidelines for this project.
  • I agree to follow the Code of Conduct that this project adheres to.
  • I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

Anchors with relative links like #foo usually trigger the popstate event on window but it seems as if they were prevented so they don't propagate to any listener added by the user. They also do not trigger when navigating through history when they normally do.

How has this issue affected you? What are you trying to accomplish?

This breaks any client side routing using the history api. Vue Router in my case.

To Reproduce

Link to sandbox: link

  • Click on the links in order
  • Navigate back and forward with history

You will see that only the navigations made with pushState trigger the popstate. But all them trigger a popstate in a regular page.

Your Environment

Software Name/Version
Сodesandbox client
Browser Chrome 85
Operating System OSX

Other

I don't know if it's related but noticed this line

window.history.replaceState({}, '', sandboxUrl({ id, alias, git }));

It should be

window.history.replaceState(window.history.state, '', sandboxUrl({ id, alias, git }));

To preserve any existing state pushed by the user.

I remember there was https://github.com/codesandbox/codesandbox-client/blob/master/packages/sandbox-hooks/url-listeners.js#L117 to work in vue-router. And we could add el.__vnode (double underscore) to make it work with Vue 3 (and that would be great already!), but I'm opening this issue in case you seek to find a long term alternative

@github-actions
Copy link

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

@posva
Copy link
Contributor Author

posva commented Dec 18, 2020

The reproduction no longer shows the problem

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

No branches or pull requests

1 participant