From b719a8aa7433cf53400a83a3180b347f0a1297ba Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 4 Mar 2024 13:02:18 +0800
Subject: [PATCH] Attempt to wrap modal root onopenchange to handle pointer
 events

---
 .../web/components/patterns/ConfirmationModal.tsx | 10 +++++++++-
 .../templates/article/SetLabelsModal.tsx          | 15 ++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/patterns/ConfirmationModal.tsx b/packages/web/components/patterns/ConfirmationModal.tsx
index f38ed3dc9..44b86ee8f 100644
--- a/packages/web/components/patterns/ConfirmationModal.tsx
+++ b/packages/web/components/patterns/ConfirmationModal.tsx
@@ -6,6 +6,7 @@ import {
 import { VStack, HStack } from '../elements/LayoutPrimitives'
 import { Button } from '../elements/Button'
 import { StyledText } from '../elements/StyledText'
+import { useCallback } from 'react'
 
 type ConfirmationModalProps = {
   message?: string
@@ -18,8 +19,15 @@ type ConfirmationModalProps = {
 }
 
 export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
+  const safeOnOpenChange = useCallback(
+    (open: boolean) => {
+      document.body.style.removeProperty('pointer-events')
+      props.onOpenChange(open)
+    },
+    [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' }}>
diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index 59fd18491..566a771e1 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -31,8 +31,9 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
   const availableLabels = useGetLabelsQuery()
   const [tabCount, setTabCount] = useState(-1)
   const [tabStartValue, setTabStartValue] = useState('')
-  const [errorMessage, setErrorMessage] =
-    useState<string | undefined>(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
   const errorTimeoutRef = useRef<NodeJS.Timeout | undefined>()
   const [highlightLastLabel, setHighlightLastLabel] = useState(false)
 
@@ -169,8 +170,16 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
     }
   }, [highlightLastLabel, selectedLabels, dispatchLabels])
 
+  const safeOnOpenChange = useCallback(
+    (open: boolean) => {
+      document.body.style.removeProperty('pointer-events')
+      props.onOpenChange(open)
+    },
+    [props]
+  )
+
   return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+    <ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
       <Dialog.Portal>
         <ModalOverlay />
         <ModalContent