From f2600fe3e835bad81b3c6eb9aeae58e7974ccea1 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Thu, 6 Nov 2025 22:39:39 +0100
Subject: [PATCH] fix: close floating sidebar on main menu open (#10295)

---
 .../components/dropdownMenu/DropdownMenu.tsx          | 10 ++++++++--
 .../components/dropdownMenu/DropdownMenuContent.tsx   | 11 +++++++++--
 .../components/dropdownMenu/DropdownMenuTrigger.tsx   |  1 -
 packages/excalidraw/css/styles.scss                   |  2 +-
 packages/excalidraw/hooks/useOutsideClick.ts          |  2 +-
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx
index 761d09b3f9..6f358311a2 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx
@@ -35,10 +35,16 @@ const DropdownMenu = ({
       : MenuContentComp;
 
   return (
-    <>
+    <div
+      className="dropdown-menu-container"
+      style={{
+        // remove this div from box layout
+        display: "contents",
+      }}
+    >
       {MenuTriggerComp}
       {open && MenuContentCompWithPlacement}
-    </>
+    </div>
   );
 };
 
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
index 28f7c78fc0..f92c9df327 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
@@ -34,8 +34,15 @@ const MenuContent = ({
 
   const callbacksRef = useStable({ onClickOutside });
 
-  useOutsideClick(menuRef, () => {
-    callbacksRef.onClickOutside?.();
+  useOutsideClick(menuRef, (event) => {
+    // prevents closing if clicking on the trigger button
+    if (
+      !menuRef.current
+        ?.closest(".dropdown-menu-container")
+        ?.contains(event.target)
+    ) {
+      callbacksRef.onClickOutside?.();
+    }
   });
 
   useEffect(() => {
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
index f43e4493b1..e1f3ef202f 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
@@ -24,7 +24,6 @@ const MenuTrigger = ({
   ).trim();
   return (
     <button
-      data-prevent-outside-click
       className={classNames}
       onClick={onToggle}
       type="button"
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 0decc5be47..4e3cf28656 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -13,10 +13,10 @@
   --zIndex-hyperlinkContainer: 7;
 
   --zIndex-ui-bottom: 60;
-  --zIndex-ui-library: 80;
   --zIndex-ui-context-menu: 90;
   --zIndex-ui-styles-popup: 100;
   --zIndex-ui-top: 100;
+  --zIndex-ui-library: 120;
 
   --zIndex-modal: 1000;
   --zIndex-popup: 1001;
diff --git a/packages/excalidraw/hooks/useOutsideClick.ts b/packages/excalidraw/hooks/useOutsideClick.ts
index 75d68f6e8b..748eae9923 100644
--- a/packages/excalidraw/hooks/useOutsideClick.ts
+++ b/packages/excalidraw/hooks/useOutsideClick.ts
@@ -5,7 +5,7 @@ import { EVENT } from "@excalidraw/common";
 export function useOutsideClick<T extends HTMLElement>(
   ref: React.RefObject<T | null>,
   /** if performance is of concern, memoize the callback */
-  callback: (event: Event) => void,
+  callback: (event: Event & { target: T }) => void,
   /**
    * Optional callback which is called on every click.
    *