pushState/replaceState don't trigger beforeNavigate

[samal-rasmussen]

Describe the bug

I just started using pushState/replaceState and realized that they don't trigger beforeNavigate, and so I cannot ask the user to confirm before navigating away from a modal form.

I have a rather big webapp that will need to have complex forms in modals. Users definitely want to be asked for confirmation before losing complex form state.

Reproduction

This modal will ask for confirmation when clicking the cancel button, but not on pressing back in the browser:
https://stackblitz.com/edit/sveltejs-kit-template-default-fsoasb?file=src%2Froutes%2FModal.svelte

There's a beforeNavigate that should be showing the confirmation, but it isn't called.

Logs

No response

System Info

Forked the newest Sveltekit Stackblitz.

Severity

Serious. My users can lose some large amounts of state when navigating away from a dirty form.

Additional Information

No response

[teemingc]

pushState and replaceState do not perform an actual navigation (shallow navigation) as it does not change the underlying route. The only things that do change are:

• The browser URL.
• The browser history entry (push/replace).
• $page.state if specified.

In comparison, (real navigations) using goto on the client, redirect in a load function, clicking on a link, will change these:

• $page.url, $page.route, etc.
• Navigation hooks e.g., beforeNavigate.
• The browser URL.
• The browser history entry (push/replace with goto).

[samal-rasmussen]

So there's no way to intercept a shallow navigation back and show a confirmation dialog before doing the back navigation? Shouldn't this be possible?

[AndreasHald]

+1 experiencing this issue aswel only workaround i found was doing something like this

<svelte:window
    on:popstate={(e) => {
        if (form_is_tainted) {
            history.pushState(null, '', window.location.href);
        }
    }} />

which is discouraged becasue it interferes with svelte kit router

[AndreasHald]

@eltigerchino can you see any reason why letting beforeNavigate fire would be an issue? I can't really come up with a reason myself. In that case should this not be considered a bug? since the documentation for shallow routing literally suggests using it as a model that can be dismissed with the back button.

If there is a good reason why beforeNavigate would be a problematic solution could something akin to beforeShallowNavigate and similar hooks be a solution?

[niemyjski]

I also think it's a bug that page params doesn't seem to being updated on popstate (spa mode). Seems like there are multiple issues here.

ref: paoloricciuti/sveltekit-search-params#80 (comment)

[ItsPouria]

Currently experiencing the same issue. Came here looking for a workaround. I'm using forms inside modals and wanted to give the mobile users a way to swipe back instead of clicking on close/cancel. The shallow routing works fine, but now I'm missing a way to show unsaved changes alert if the form is dirty/tainted.

[samal-rasmussen]

No workaround, and no word from anyone on the Svelte team on whether they want to support this.

[niemyjski]

@Rich-Harris any chance we can get a direction on this on what the team would like done here. Hopefully that drives a community pr.