Merge pull request #3616 from omnivore-app/fix/web-dismiss-pointer

Attempt to wrap modal root onopenchange to handle pointer events

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' }}>

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,17 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
     }
   }, [highlightLastLabel, selectedLabels, dispatchLabels])
 
+  const safeOnOpenChange = useCallback(
+    (open: boolean) => {
+      console.log('safe on open change called')
+      document.body.style.removeProperty('pointer-events')
+      props.onOpenChange(open)
+    },
+    [props]
+  )
+
   return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+    <ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
       <Dialog.Portal>
         <ModalOverlay />
         <ModalContent