Merge pull request #1443 from culturecreates/bugfix/issue-1431

fix: fixed bug popup blockers preventing unsaved chnages popup from s…

src/components/Modal/Confirm/Confirm.jsx

@@ -2,7 +2,7 @@ import { Modal } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import './confirm.css';
 
-export const Confirm = ({ title, content, onAction, okText, cancelText, className }) => {
+export const Confirm = ({ title, content, onAction, okText, cancelText, className, closable }) => {
   const { confirm } = Modal;
 
   let modalClassName = ['global-delete-modal-container'];
@@ -29,7 +29,7 @@ export const Confirm = ({ title, content, onAction, okText, cancelText, classNam
     cancelText: cancelText,
     centered: true,
     className: modalClassName,
-    closable: true,
+    closable: closable ?? true,
     header: null,
     onOk() {
       onAction();

src/hooks/usePrompt.js

@@ -1,8 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useBlocker, useBeforeUnload, useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { Confirm } from '../components/Modal/Confirm/Confirm';
 
 export const RouteLeavingGuard = ({ isBlocking }) => {
+  let confirm = false;
+
   function useCallbackPrompt(when) {
     const navigate = useNavigate();
     const { t } = useTranslation();
@@ -16,13 +19,24 @@ export const RouteLeavingGuard = ({ isBlocking }) => {
           return false;
         }
 
-        const confirm = window.confirm(`${t('common.unsavedChanges')}`);
         if (confirm) {
           setConfirmedNavigation(true);
           setLastLocation(history.nextLocation);
           return false;
         }
 
+        Confirm({
+          content: t('common.unsavedChanges'),
+          closable: false,
+          className: 'unsaved-changes-popup',
+          onAction: () => {
+            setConfirmedNavigation(true);
+            confirm = true;
+            setLastLocation(history.nextLocation);
+            return false;
+          },
+        });
+
         return true;
       },
       [confirmedNavigation, location.pathname, when, t],

src/index.css

@@ -74,6 +74,10 @@ body.inheritCursors * {
   cursor: -webkit-grabbing;
 }
 
+.unsaved-changes-popup .ant-modal-confirm-title {
+  padding: 28px;
+}
+
 @media screen and (max-width: 480px) {
   .ant-pagination {
     display: flex;