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