From c8f77bd23abd68d1e2d98ffd9037abce97008721 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Sun, 9 Apr 2023 23:13:16 +0800
Subject: [PATCH] model config click backdrop to confirm

---
 src/components/ConfigMenu/ConfigMenu.tsx | 1 +
 src/components/PopupModal/PopupModal.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ConfigMenu/ConfigMenu.tsx b/src/components/ConfigMenu/ConfigMenu.tsx
index 9ecb9ef..f8ad002 100644
--- a/src/components/ConfigMenu/ConfigMenu.tsx
+++ b/src/components/ConfigMenu/ConfigMenu.tsx
@@ -44,6 +44,7 @@ const ConfigMenu = ({
       title={t('configuration') as string}
       setIsModalOpen={setIsModalOpen}
       handleConfirm={handleConfirm}
+      handleClickBackdrop={handleConfirm}
     >
       <div className='p-6 border-b border-gray-200 dark:border-gray-600'>
         <ModelSelector _model={_model} _setModel={_setModel} />
diff --git a/src/components/PopupModal/PopupModal.tsx b/src/components/PopupModal/PopupModal.tsx
index 2bcfc97..55fac05 100644
--- a/src/components/PopupModal/PopupModal.tsx
+++ b/src/components/PopupModal/PopupModal.tsx
@@ -10,6 +10,7 @@ const PopupModal = ({
   setIsModalOpen,
   handleConfirm,
   handleClose,
+  handleClickBackdrop,
   cancelButton = true,
   children,
 }: {
@@ -18,6 +19,7 @@ const PopupModal = ({
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   handleConfirm?: () => void;
   handleClose?: () => void;
+  handleClickBackdrop?: () => void;
   cancelButton?: boolean;
   children?: React.ReactElement;
 }) => {
@@ -29,6 +31,11 @@ const PopupModal = ({
     setIsModalOpen(false);
   };
 
+  const _handleBackdropClose = () => {
+    if (handleClickBackdrop) handleClickBackdrop();
+    else _handleClose();
+  };
+
   if (modalRoot) {
     return ReactDOM.createPortal(
       <div className='fixed top-0 left-0 z-[999] w-full p-4 overflow-x-hidden overflow-y-auto h-full flex justify-center items-center'>
@@ -81,7 +88,7 @@ const PopupModal = ({
         </div>
         <div
           className='bg-gray-800/90 absolute top-0 left-0 h-full w-full z-[-1]'
-          onClick={_handleClose}
+          onClick={_handleBackdropClose}
         />
       </div>,
       modalRoot