Hello there, sorry for the vague title, but I don’t know exactly how to describe this bug quickly.
I can describe the whole process though.
Basically I have a symfony app with turbo drive enabled and it works fine.
Then I have a couple of pages with tags <a> with href that have hases meant to work as a integrated tab system and I have added a stimulus controller to listen to the changes of the hash in the url and update the dom accordingly:
this.hashChangeListener = (event) => {
console.log(event);
const newHash = event.newURL.split('#')[1] ?? 'general';
this.switch_tab(document.getElementById('sh-' + newHash) as HTMLDivElement);
setTimeout(() => { this.update_tabs_css() }, 10);
}
window.addEventListener("hashchange", this.hashChangeListener.bind(this));
(I also added code to properly remove this listener on disconnect).
Again, this has no problem when I navigate on my app.
However as soon as I click on a link that leads outside of this frontend (easyadmin, or even a link leading to another website), and then I press “back” on my browser’s history, catastrophy happens.
The hash listener doesn’t react to new clicks on tabs, but the url still changes.
If I press back again, and then forward then it reacts, but still it won’t react to clicks on the tabs.
Even when I exit the page and come back, the bug persists. The only way to get the hashchange listener to work again is to F5
Below you can see a demo of the behavior (I am using the back/forward buttons on my mouse)
I have tried many things, such as triggering a page refresh with window.location.reload() when I detect a “back_forward” navigation event, but that seems to cause a memory leak because then I can see the hash even triggering multiple times on the same page instead of once.
What am I missing, did anyone experience this before ?