fix(next): properly closes leave-without-saving modal after navigating from Leave anyway button (#7661)

Author: PatrikKozak

packages/next/src/elements/LeaveWithoutSaving/index.tsx

@@ -50,6 +50,7 @@ const Component: React.FC<{
 }
 
 export const LeaveWithoutSaving: React.FC = () => {
+  const { closeModal } = useModal()
   const modified = useFormModified()
   const { user } = useAuth()
   const [show, setShow] = React.useState(false)
@@ -61,7 +62,11 @@ export const LeaveWithoutSaving: React.FC = () => {
     setShow(true)
   }, [])
 
-  usePreventLeave({ hasAccepted, onPrevent, prevent })
+  const handleAccept = useCallback(() => {
+    closeModal(modalSlug)
+  }, [closeModal])
+
+  usePreventLeave({ hasAccepted, onAccept: handleAccept, onPrevent, prevent })
 
   return (
     <Component

packages/next/src/elements/LeaveWithoutSaving/usePreventLeave.tsx

@@ -57,12 +57,14 @@ export const useBeforeUnload = (enabled: (() => boolean) | boolean = true, messa
 export const usePreventLeave = ({
   hasAccepted = false,
   message = 'Are you sure want to leave this page?',
+  onAccept,
   onPrevent,
   prevent = true,
 }: {
   hasAccepted: boolean
   // if no `onPrevent` is provided, the message will be displayed in a confirm dialog
   message?: string
+  onAccept?: () => void
   // to use a custom confirmation dialog, provide a function that returns a boolean
   onPrevent?: () => void
   prevent: boolean
@@ -142,7 +144,8 @@ export const usePreventLeave = ({
 
   useEffect(() => {
     if (hasAccepted && cancelledURL.current) {
+      if (onAccept) onAccept()
       router.push(cancelledURL.current)
     }
-  }, [hasAccepted, router])
+  }, [hasAccepted, onAccept, router])
 }

test/admin/e2e/1/e2e.spec.ts

@@ -1023,6 +1023,30 @@ describe('admin1', () => {
       await page.locator('.doc-controls__popup >> .popup-button').click()
       await expect(page.locator('#action-duplicate')).toBeHidden()
     })
+
+    test('should properly close leave-without-saving modal after clicking leave-anyway button', async () => {
+      const { id } = await createPost()
+      await page.goto(postsUrl.edit(id))
+      const title = 'title'
+      await page.locator('#field-title').fill(title)
+      await saveDocHotkeyAndAssert(page)
+      await expect(page.locator('#field-title')).toHaveValue(title)
+
+      const newTitle = 'new title'
+      await page.locator('#field-title').fill(newTitle)
+
+      await page.locator('header.app-header a[href="/admin/collections/posts"]').click()
+
+      // Locate the modal container
+      const modalContainer = page.locator('.payload__modal-container')
+      await expect(modalContainer).toBeVisible()
+
+      // Click the "Leave anyway" button
+      await page.locator('.leave-without-saving__controls .btn--style-primary').click()
+
+      // Assert that the class on the modal container changes to 'payload__modal-container--exitDone'
+      await expect(modalContainer).toHaveClass(/payload__modal-container--exitDone/)
+    })
   })
 
   describe('custom IDs', () => {