fix: overlapping element menus (#3993)

* fix overlapping menus

lib/hooks/form-builder/useHandleAdd.tsx

@@ -49,7 +49,13 @@ export const useHandleAdd = () => {
       treeView?.current?.addItem(String(id));
 
       const el = document.getElementById(`item-${id}`);
+
       if (!el) return;
+
+      // Close all panel menus before focussing on the new element
+      const closeAll = new CustomEvent("close-all-panel-menus");
+      window && window.dispatchEvent(closeAll);
+
       el?.focus();
     },
     [add, create, groupId, treeView]

lib/hooks/form-builder/useIsWithin.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useFocusWithin } from "react-aria";
 
 export const useIsWithin = () => {
@@ -13,6 +13,22 @@ export const useIsWithin = () => {
     },
   });
 
+  // Add event listener for a custom close-all-panel-menus event
+  // This fixes an issue where the panel menu would still be open
+  // after adding and focusing on a new element
+  useEffect(() => {
+    window &&
+      window.addEventListener("close-all-panel-menus", () => {
+        setFocusWithin(false);
+      });
+
+    return () => {
+      window.removeEventListener("close-all-panel-menus", () => {
+        setFocusWithin(false);
+      });
+    };
+  }, []);
+
   const isWithin = isFocusWithin ? true : false;
 
   return { focusWithinProps, isWithin };