From 712cad9ea16677226371f8db851d387c07585f64 Mon Sep 17 00:00:00 2001
From: Eduardo Grajeda <tatofoo@gmail.com>
Date: Sat, 23 Mar 2024 17:05:43 +0100
Subject: [PATCH] fix: page becomes unresponsive after closing modal

Came across this issue while migrating to Omnivore, but I saw it also
reported in issue #3648. There was a first attempt to fix in #3653, but
I believe it's an issue in the library itself, which is not there
anymore in 2.0.6.

It also fixes the "too much recursion" error that shows in the console
when the modal is open, both in the Feeds page and in the Inbox (e.g.
when clicking on Edit Info).
---
 .../components/patterns/ConfirmationModal.tsx | 20 ++-----------------
 packages/web/package.json                     |  2 +-
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/packages/web/components/patterns/ConfirmationModal.tsx b/packages/web/components/patterns/ConfirmationModal.tsx
index 6e78b9566..f38ed3dc9 100644
--- a/packages/web/components/patterns/ConfirmationModal.tsx
+++ b/packages/web/components/patterns/ConfirmationModal.tsx
@@ -6,7 +6,6 @@ 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
@@ -19,19 +18,8 @@ type ConfirmationModalProps = {
 }
 
 export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
-  const safeOnOpenChange = useCallback(
-    (open: boolean) => {
-      setTimeout(() => {
-        console.log('body style: ', document.body.style)
-        document.body.style.removeProperty('pointer-events')
-      }, 200)
-      props.onOpenChange(open)
-    },
-    [props]
-  )
-
   return (
-    <ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
+    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
       <ModalContent css={{ bg: '$grayBg', maxWidth: '20em', zIndex: '20' }}>
         <VStack alignment="center" distribution="center" css={{ p: '15px' }}>
@@ -57,15 +45,11 @@ export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
             </Button>
             <Button
               style="ctaDarkYellow"
-              onClick={() => {
-                props.onAccept()
-                document.body.style.removeProperty('pointer-events')
-              }}
+              onClick={props.onAccept}
               onKeyDown={(event) => {
                 if (event.key === 'Enter') {
                   event.preventDefault()
                   props.onAccept()
-                  document.body.style.removeProperty('pointer-events')
                 }
               }}
             >
diff --git a/packages/web/package.json b/packages/web/package.json
index eb8e515ba..467f44d12 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -20,7 +20,7 @@
     "@radix-ui/react-avatar": "^0.1.1",
     "@radix-ui/react-checkbox": "^0.1.5",
     "@radix-ui/react-dialog": "1.0.5",
-    "@radix-ui/react-dropdown-menu": "1.0.0",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-id": "^0.1.1",
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-progress": "^1.0.1",