fix: revert useClickOutside behaviour in dialog & menu (#1394)

sanity-io · Jul 17, 2024 · 686bd1f · 686bd1f
1 parent 9476ae9
commit 686bd1f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/src/core/components/dialog/dialog.tsx b/src/core/components/dialog/dialog.tsx
@@ -216,18 +216,21 @@ const DialogCard = forwardRef(function DialogCard(
   )
 
   useClickOutside(
-    (event: MouseEvent) => {
-      if (!isTopLayer || !onClickOutside) return
+    useCallback(
+      (event) => {
+        if (!isTopLayer || !onClickOutside) return
 
-      const target = event.target as Node | null
+        const target = event.target as Node | null
 
-      if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
-        // Ignore clicks outside of the scope
-        return
-      }
+        if (target && !isTargetWithinScope(boundaryElement, portalElement, target)) {
+          // Ignore clicks outside of the scope
+          return
+        }
 
-      onClickOutside()
-    },
+        onClickOutside()
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement],
+    ),
     [rootElement],
   )
 

diff --git a/src/core/components/menu/menu.tsx b/src/core/components/menu/menu.tsx
@@ -93,7 +93,13 @@ export const Menu = forwardRef(function Menu(
   }, [activeIndex, onItemSelect])
 
   // Close menu when clicking outside
-  useClickOutside((event) => isTopLayer && onClickOutside && onClickOutside(event), [rootElement])
+  useClickOutside(
+    useCallback(
+      (event) => isTopLayer && onClickOutside && onClickOutside(event),
+      [isTopLayer, onClickOutside],
+    ),
+    [rootElement],
+  )
 
   // Close menu when pressing Escape
   useGlobalKeyDown(