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

No trigger for either hashchange or popstate event on window #310

Open
orty opened this issue Jan 7, 2022 · 2 comments
Open

No trigger for either hashchange or popstate event on window #310

orty opened this issue Jan 7, 2022 · 2 comments

Comments

@orty
Copy link

orty commented Jan 7, 2022

Hi,

We were using the v7 of your library since a couple of years ago now, and we decided to migrate to the new v8 one. We are experiencing an issue with detecting the navigation event, we need it to wait for the URL to be updated in the address bar before continuing a process.

An example :
The user search for a string in a searchbox. We put the query in the URL (with hash = true), which gives us 2 things :

  • a way to retrieve the issued query if the page is shared by copy/pasting the URL
  • a way to handle the full interaction history with the built-in back/forward feature of the browser.

This is how things are on our side :

router = new Navigo(root, { hash: true });

const shouldResolve = (e.detail && e.detail.pauseRouter === true) ? false : true; // our own condition to ignore the resolution for a non-navigation URL change (for example, for the use case I detailed before
this.router.navigate(href, { callHandler: shouldResolve );

To be exhaustive, I checked that, even for a case when shouldResolve is set to true (when issuing a real navigation from one page to another), the following event listener do not get fired :

window.addEventListener("hashchange", function() {console.log('HASHCHANGE', arguments)});
window.addEventListener("popstate", function() {console.log('POPSTATE', arguments)});

What is wrong in our implementation ?

Many thanks !

@krasimir
Copy link
Owner

krasimir commented Jan 7, 2022

Hey,

just so I build the full context

we need it to wait for the URL to be updated in the address bar

who and how is updating the address bar? Is that Navigo again or you have some other logic?

@orty
Copy link
Author

orty commented Jan 7, 2022

Hey,

This is done by Navigo itself, we do not update the URL ourselves.

Moreover, I did some new tests by adding an after hook and triggering a CustomEvent in it, which I can then listen wherever I need it. But the hook never gets called neither :/ (even if my handler is executed) . It seems that I am really doing something wrong but I fail to see what :)

Regarding my first message, I now see, after reading through the source code, that the location.hash is not directly updated when using hash: true, you only push the new entry to the history. And we lack a direct action from the user (the navigation itself is asynchronous and based on a CustomEvent, so the popstate event can never be fired, as stated here).

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

2 participants