fix: close floating sidebar on main menu open (#10295)

2025-11-06 22:39:39 +01:00
parent 95ddc66339
commit f2600fe3e8
5 changed files with 19 additions and 7 deletions
@@ -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>
  );
 };

@@ -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(() => {
@@ -24,7 +24,6 @@ const MenuTrigger = ({
  ).trim();
  return (
    <button
-      data-prevent-outside-click
      className={classNames}
      onClick={onToggle}
      type="button"