Svelte: Cannot bind `popstate` event to <:Window> component

[jacobmischka]

It seems that trying to add a popstate handler via <:Window on:popstate="handlePopState(event)" /> doesn't work.

Interestingly, while setting window.onpopstate = this.handlePopState; in oncreate() does work, trying to unset it in ondestroy() breaks it again.

[arxpoetica]

Can't reproduce this in the REPL because it complains about cross origin kinda stuff (or something like that) (https://svelte.technology/repl?version=1.57.4&gist=f417cfd9694ba51b8c1c973611dbffd5), but I thought I was able to get this working when I used it somewhere else prior. Lemme see if I can go dig that up somewhere else.

[jacobmischka]

I'll try to get up a better example soon, apologies, I was in a bit of a rush at the time. Thanks!

[Rich-Harris]

I can't seem to reproduce this — it seems to work okay (though not in the REPL because it changes the history for the entire page rather than the iframe). Let me know if you're still having this issue or if we can close it

[PaulMaly]

@Rich-Harris @Conduitry Actually,popstate still not working. Not only in REPL, but even if download it. And not only in v2 but also in v3.

Rich's latest example works fine only because of this line before pushState:

this.set({ state }); // if we comment this line nothing will work okay
history.pushState(state, '', `/${uid}`);

But popstate event never fired:

   popState(event) { 
        console.log('This will never be printed!');
    this.set({ state: event.state });
   }

The same example on beta20: https://v3.svelte.technology/repl?version=3.0.0-beta.20&gist=ecfaef5f5e5f02c2ebf160b4ce06ac0a

[jacobmischka]

Yeah, I remember it being pretty weird in that it would work fine if observed ahead of time for some weird quantumesque reason. Apologies for never getting around to providing a good example before.

[PaulMaly]

@Rich-Harris Any news here?

[Rich-Harris]

Afraid not, I'm tied up with conference talk prep at the moment

[PaulMaly]

Oh, yea, sorry. I think I’ll try to check it myself.

[PaulMaly]

I read the MDN docs more carefully and seems everything works as expected. So, seems we can close this issue.

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as a click on the back button (or calling history.back() in JavaScript).

[yuliankarapetkov]

I still cannot bind to popstate on svelte:windwow - the following line doesn't produce a log when I click the browser back button:

<svelte:window on:popstate={(e) => console.log(e)} />

However, this line works as expected:

window.addEventListener('popstate', (e) => console.log(e))

_Edit_: I am using Svelte 3.21.0.