Add event hook for cancelable browser back and forward navigation

[Bloemendaal]

Versions:

• @inertiajs/core version: 1.0.10

Describe the problem:

Currently, Inertia does not provide a specific event hook for intercepting and canceling browser back and forward navigation. While the library allows capturing in-page navigation, handling navigation through the browser's back and forward buttons is not directly supported. This limitation poses challenges for scenarios such as warning users about unsaved changes, as well as other contexts where controlling or canceling back and forward navigation is necessary.

The expected behavior would be to have a way within Inertia to easily detect and optionally cancel back and forward navigation, possibly through specific events or hooks designed for this purpose.

Steps to reproduce:

1. Create a component with unsaved changes state: Create a form with some input fields, and use a state to track whether there are unsaved changes.
2. Modify without saving: Modify the input without saving, thus setting the unsaved changes state to true.
3. Attempt to navigate away: Use the browser's back or forward buttons to attempt navigation away from the page.
4. No handling for unsaved changes: Observe that there is no built-in way within Inertia to intercept this navigation, warn the user, or cancel the navigation.

The absence of an event hook or mechanism within Inertia to handle browser back and forward navigation necessitates workarounds, such as using the popstate event, which may interfere with other client-side routing logic.

My preferred implementation

export default function useUnsavedChanges(active: boolean): void {
  useEffect(() => {
    const handleInertiaNavigation = (event: Event): void => {
      if (hasUnsavedChanges) {
        const confirmed = window.confirm('You have unsaved changes! Are you sure you want to leave?');

        if (!confirmed) {
          event.preventDefault();
        }
      }
    };

    return router.on('beforeNavigateHistory', handleInertiaNavigation);
  }, [hasUnsavedChanges]);
}

[RobertBoes]

Correct me if I'm wrong, but cancelling the history navigation is impossible, otherwise it would be incredibly easy to trap someone on your website. There is the onbeforeunload event, which is cancellable by the user, maybe the same could be done here (I'm talking about the native browser confirm popup). Apart from that I don't think there would be any way to cancel a history navigation, not without hacky workarounds such as pushing a new state, but many browsers block that too afaik

[Bloemendaal]

You're right, but according to this 'very reliable' source, pushing the same state back should work: https://chat.openai.com/share/00d4058e-bbd1-46eb-8543-95a436bf613f

At least I'd like to be able to cancel the functions Inertia executes with this event to implement my own hack. Normally, the browser would dispatch an unload event when using normal navigation. So, I think it should be possible to replicate the same functionality.

I'm building an editor with react flow and if the user moves left, the native back even in the browser is sometimes triggered by accident and the complete state is gone :/

[reinink]

Hey! Thanks for sharing this idea. Since it's a feature request and not an issue, I've moved it to the discussions "ideas" category.

I've actually wanted to solve this exact problem myself in the past, but wasn't able to come up with an elegant solution. The issue is that the browser does not let you prevent popstate events — meaning even if the router doesn't respond to the forward/back navigation, the browser still changes its position in the history state and will update the page URL.

Looking around tonight to see how others handle this, I learned that Vue Router actually does support this — but it's doing some pretty clever hackery to make it actually work. They allow you to prevent navigation using the beforeRouteLeave navigation guard. However, because popstate events can't be cancelled (prevented), what they effectively do is call history.forward() or history.back() right after you go forward/back in history to reset you back in the same position in history.

It's actually more complicated than that, because it's possible to go back multiple steps in history by pressing and holding down the back button and choosing a specific point in your history. What they do to solve that is keep track of each page history in local state and then calculate the delta between where you were in history state and where you've gone to, and then they call history.go(delta) to reset the history position.

This seems to work, although the Vue Router code has lots of little handlers for weird gotchas, as this isn't really how browsers intended for this API to be used.

This is something we could potentially try and implement in the future, but it's a non-trivial thing to implement, so I don't think it's going to happen soon, just being honest.

[kobe-ra]

I understand this is a tougher problem to solve. However, with inertia navigation I'm losing access to the beforeunload event as well, since router is managing the back button. Therefore the event would be triggered when user does something like page refresh, not when leaving the page. Maybe we could get propagated beforeunload event from inertia router we could listen to? Because showing the browser's confirm alert would be better solution than leaving the page for me - as users often try to close gallery dialog by pressing back button.