refactor: handle overlapping drawer since Nested plugin refactor

measuredco · Jan 2, 2025 · 01bf755 · 01bf755
1 parent e6226d4
commit 01bf755
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/core/components/DragDropContext/NestedDroppablePlugin.ts b/packages/core/components/DragDropContext/NestedDroppablePlugin.ts
@@ -76,7 +76,14 @@ const getPointerCollisions = (
     el.getAttribute("data-puck-preview")
   );
 
-  // If cursor is over iframe, but user is in host doc, go into the iframe
+  // Restrict to drawer element if pointer is over drawer. This is necessary if
+  // the drawer is over dnd elements.
+  const drawer = elements.find((el) => el.getAttribute("data-puck-drawer"));
+  if (drawer) {
+    elements = [drawer];
+  }
+
+  // If cursor is over iframe (but not drawer), and user is in host doc, go into the iframe doc
   // This occurs when dragging in new items
   if (previewFrame) {
     const iframe = previewFrame.querySelector("iframe");

diff --git a/packages/core/components/Drawer/index.tsx b/packages/core/components/Drawer/index.tsx
@@ -174,7 +174,12 @@ export const Drawer = ({
   });
 
   return (
-    <div className={getClassName()} ref={ref} data-puck-dnd={id}>
+    <div
+      className={getClassName()}
+      ref={ref}
+      data-puck-dnd={id}
+      data-puck-drawer
+    >
       {children}
     </div>
   );