From fc7ae038491c4898a67656eddf0f1cc5cb0756b1 Mon Sep 17 00:00:00 2001
From: juhanikat <juhani.kataja@gmail.com>
Date: Fri, 1 Aug 2025 11:46:40 +0300
Subject: [PATCH] add confirmation popup before leaving a page with potential
 unsaved changes

---
 .../src/components/DetailView/DetailView.tsx  | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/frontend/src/components/DetailView/DetailView.tsx b/frontend/src/components/DetailView/DetailView.tsx
index 0b2c7a59..cf7093bb 100755
--- a/frontend/src/components/DetailView/DetailView.tsx
+++ b/frontend/src/components/DetailView/DetailView.tsx
@@ -95,6 +95,28 @@ export const DetailView = <T extends object>({
     )
   }, [tab, setSearchParams])
 
+  // asks user for confirmation before leaving or refreshing a page with potential unsaved changes
+  // does not work if user navigates away using browser back or forward buttons,
+  // or navigates to another page using the navigation bar. (See issue #911)
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault()
+    }
+    if (
+      [
+        modeOptionToMode['edit'],
+        modeOptionToMode['new'],
+        modeOptionToMode['staging-edit'],
+        modeOptionToMode['staging-new'],
+      ].includes(mode)
+    ) {
+      window.addEventListener('beforeunload', handleBeforeUnload)
+    }
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+    }
+  }, [mode])
+
   const setMode = (newMode: ModeOptions) => {
     setModeState(modeOptionToMode[newMode])
   }