From 599f7c9174bd32d14e40fc2d79afb3e677e71257 Mon Sep 17 00:00:00 2001
From: Aman <138197666+aman44444@users.noreply.github.com>
Date: Wed, 14 Feb 2024 06:40:04 +0000
Subject: [PATCH] "click outside to close the menu"

---
 .../data/joy/components/button-group/SplitButton.js | 13 +++++++++++++
 .../joy/components/button-group/SplitButton.tsx     | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/docs/data/joy/components/button-group/SplitButton.js b/docs/data/joy/components/button-group/SplitButton.js
index 40b68f3ac669f8..9ffdd206a964a7 100644
--- a/docs/data/joy/components/button-group/SplitButton.js
+++ b/docs/data/joy/components/button-group/SplitButton.js
@@ -23,6 +23,19 @@ export default function SplitButton() {
     setOpen(false);
   };
 
+  const handleOutsideClick = (event) => {
+    if (anchorRef.current && !anchorRef.current.contains(event.target)) {
+      setOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, []);
+
   return (
     <React.Fragment>
       <ButtonGroup
diff --git a/docs/data/joy/components/button-group/SplitButton.tsx b/docs/data/joy/components/button-group/SplitButton.tsx
index 0f7b6521af3dce..4b653c6e3fd79c 100644
--- a/docs/data/joy/components/button-group/SplitButton.tsx
+++ b/docs/data/joy/components/button-group/SplitButton.tsx
@@ -26,6 +26,19 @@ export default function SplitButton() {
     setOpen(false);
   };
 
+  const handleOutsideClick = (event: MouseEvent) => {
+    if (anchorRef.current && !anchorRef.current.contains(event.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, []);
+
   return (
     <React.Fragment>
       <ButtonGroup