From 50a7315185a7a11582adb48da2cbea32e29b931e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 8 Mar 2024 17:41:49 +0800
Subject: [PATCH] Fix confirmation modal

---
 .../components/patterns/ConfirmationModal.tsx  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/patterns/ConfirmationModal.tsx b/packages/web/components/patterns/ConfirmationModal.tsx
index a82a9677f..25618fdbe 100644
--- a/packages/web/components/patterns/ConfirmationModal.tsx
+++ b/packages/web/components/patterns/ConfirmationModal.tsx
@@ -19,8 +19,18 @@ type ConfirmationModalProps = {
 }
 
 export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
+  const safeOnOpenChange = useCallback(
+    (open: boolean) => {
+      props.onOpenChange(open)
+      setTimeout(() => {
+        document.body.style.removeProperty('pointer-events')
+      }, 200)
+    },
+    [props]
+  )
+
   return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+    <ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
       <ModalOverlay />
       <ModalContent css={{ bg: '$grayBg', maxWidth: '20em', zIndex: '20' }}>
         <VStack alignment="center" distribution="center" css={{ p: '15px' }}>
@@ -46,11 +56,15 @@ export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
             </Button>
             <Button
               style="ctaDarkYellow"
-              onClick={props.onAccept}
+              onClick={() => {
+                props.onAccept()
+                document.body.style.removeProperty('pointer-events')
+              }}
               onKeyDown={(event) => {
                 if (event.key === 'Enter') {
                   event.preventDefault()
                   props.onAccept()
+                  document.body.style.removeProperty('pointer-events')
                 }
               }}
             >