fix(console): close confirm modal on the location path changed (#3981)

packages/console/src/contexts/AppConfirmModalProvider/index.tsx

@@ -1,6 +1,6 @@
 import type { Nullable } from '@silverhand/essentials';
 import { noop } from '@silverhand/essentials';
-import { useState, useRef, useMemo, createContext, useCallback } from 'react';
+import { useState, useRef, useMemo, createContext, useCallback, useEffect } from 'react';
 
 import ConfirmModal from '@/components/ConfirmModal';
 import type { ConfirmModalProps } from '@/components/ConfirmModal';
@@ -85,6 +85,22 @@ function AppConfirmModalProvider({ children }: Props) {
     [handleCancel, handleConfirm, handleShow]
   );
 
+  useEffect(() => {
+    const handlePathChange = () => {
+      handleCancel();
+    };
+
+    /**
+     * Note: Close the modal when the location path changes.
+     * We don't use react-router-dom's `UseLocation` since this is a global component and not relying on the router.
+     */
+    window.addEventListener('popstate', handlePathChange);
+
+    return () => {
+      window.removeEventListener('popstate', handlePathChange);
+    };
+  }, [handleCancel]);
+
   const { ModalContent, type, ...restProps } = modalState;
 
   return (

packages/console/src/pages/WebhookDetails/index.tsx

@@ -1,7 +1,7 @@
 import { withAppInsights } from '@logto/app-insights/react';
 import { type HookResponse, type Hook } from '@logto/schemas';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
@@ -48,17 +48,11 @@ function WebhookDetails() {
   const theme = useTheme();
   const WebhookIcon = theme === 'light' ? Webhook : WebhookDark;
 
-  const { show, cancel } = useConfirmModal();
+  const { show } = useConfirmModal();
 
   const [isDeleting, setIsDeleting] = useState(false);
   const [isUpdatingEnableState, setIsUpdatingEnableState] = useState(false);
 
-  useEffect(() => {
-    return () => {
-      cancel();
-    };
-  }, [cancel, pathname]);
-
   const handleDelete = async () => {
     if (!data || isDeleting) {
       return;