WEB-147 Fix forward/backward navigation guard (#130)

Author: wlenig

src/app/editor/[id]/[slug]/useUnsavedChangesGuard.ts

@@ -1,25 +1,12 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect } from "react";
 import { useDialogs } from "@/components/ui/dialog-provider";
 
 const LEAVE_MESSAGE = "You have unsaved changes. Leave this page without saving?";
 
-// Next.js internally sets an auto-incrementing `idx` on history.state to track
-// navigation position. This is an undocumented internal — not a public API — so
-// it may disappear or change in any Next.js release. We use it to determine
-// whether the user navigated forward or back so we can revert the navigation
-// when they cancel. If `idx` is absent we degrade gracefully (warn, but can't
-// revert). See: https://github.com/vercel/next.js/discussions/34980
-function getCurrentHistoryIndex() {
-  const historyState = window.history.state as { idx?: number } | null;
-  return typeof historyState?.idx === "number" ? historyState.idx : null;
-}
-
 export function useUnsavedChangesGuard(isDirty: boolean) {
   const { confirm } = useDialogs();
-  const historyIndexRef = useRef<number | null>(null);
-  const isRevertingNavigationRef = useRef(false);
 
   const confirmDiscardChanges = useCallback(async () => {
     if (!isDirty) {
@@ -38,47 +25,34 @@ export function useUnsavedChangesGuard(isDirty: boolean) {
       return;
     }
 
-    historyIndexRef.current = getCurrentHistoryIndex();
-    isRevertingNavigationRef.current = false;
-
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {
       event.preventDefault();
       // Needed for Chrome version <=119 to show the confirmation dialog
       event.returnValue = true;
     };
 
-    const handlePopState = () => {
-      const nextHistoryIndex = getCurrentHistoryIndex();
-
-      if (!isRevertingNavigationRef.current) {
-        const shouldLeave = window.confirm(LEAVE_MESSAGE);
+    const handleHistoryNavigate = (event: NavigateEvent) => {
+      if (event.navigationType !== "traverse" || !event.cancelable || event.hashChange) {
+        return;
+      }
 
-        if (!shouldLeave) {
-          if (
-            historyIndexRef.current !== null &&
-            nextHistoryIndex !== null &&
-            historyIndexRef.current !== nextHistoryIndex
-          ) {
-            isRevertingNavigationRef.current = true;
-            window.history.go(historyIndexRef.current > nextHistoryIndex ? 1 : -1);
-            return;
-          }
+      const destination = new URL(event.destination.url);
 
-          console.warn("Unable to determine history direction for unsaved-changes guard");
-        }
+      if (destination.origin !== window.location.origin) {
+        return;
       }
 
-      isRevertingNavigationRef.current = false;
-      historyIndexRef.current = nextHistoryIndex;
+      if (!window.confirm(LEAVE_MESSAGE)) {
+        event.preventDefault();
+      }
     };
 
     window.addEventListener("beforeunload", handleBeforeUnload);
-    window.addEventListener("popstate", handlePopState);
+    window.navigation?.addEventListener("navigate", handleHistoryNavigate);
 
     return () => {
-      isRevertingNavigationRef.current = false;
       window.removeEventListener("beforeunload", handleBeforeUnload);
-      window.removeEventListener("popstate", handlePopState);
+      window.navigation?.removeEventListener("navigate", handleHistoryNavigate);
     };
   }, [isDirty]);
 

src/types/navigation.d.ts

@@ -0,0 +1,21 @@
+declare global {
+  interface Window {
+    navigation?: Navigation;
+  }
+
+  interface Navigation extends EventTarget {
+    addEventListener(type: "navigate", listener: (event: NavigateEvent) => void): void;
+    removeEventListener(type: "navigate", listener: (event: NavigateEvent) => void): void;
+  }
+
+  interface NavigateEvent extends Event {
+    readonly cancelable: boolean;
+    readonly destination: {
+      readonly url: string;
+    };
+    readonly hashChange: boolean;
+    readonly navigationType: string;
+  }
+}
+
+export {};

tsconfig.json

@@ -5,6 +5,6 @@
     "paths": { "@/*": ["./src/*"] },
     "plugins": [{ "name": "next" }]
   },
-  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }