Turbo and stimulus glitch when exiting the app and coming back with history

@deksor
Thu, 28 Aug 2025 13:02:34 +0000

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 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 ?