From 25c25099943a650be933945af61f19e9081f59de Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Tue, 19 Nov 2024 11:58:05 +0100
Subject: [PATCH] set activator node

---
 .../product-create-details-media-section.tsx                | 3 +++
 .../edit-product-media-form/edit-product-media-form.tsx     | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-media-section/product-create-details-media-section.tsx b/packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-media-section/product-create-details-media-section.tsx
index d001328df3cf5..6cb5246586f3d 100644
--- a/packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-media-section/product-create-details-media-section.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-media-section/product-create-details-media-section.tsx
@@ -175,6 +175,7 @@ const MediaItem = ({ field, onDelete, onMakeThumbnail }: MediaItemProps) => {
     attributes,
     listeners,
     setNodeRef,
+    setActivatorNodeRef,
     transform,
     transition,
     isDragging,
@@ -199,9 +200,11 @@ const MediaItem = ({ field, onDelete, onMakeThumbnail }: MediaItemProps) => {
       <div className="flex items-center gap-x-2">
         <IconButton
           variant="transparent"
+          type="button"
           size="small"
           {...attributes}
           {...listeners}
+          ref={setActivatorNodeRef}
           className="cursor-grab touch-none active:cursor-grabbing"
         >
           <DotsSix className="text-ui-fg-muted" />
diff --git a/packages/admin/dashboard/src/routes/products/product-media/components/edit-product-media-form/edit-product-media-form.tsx b/packages/admin/dashboard/src/routes/products/product-media/components/edit-product-media-form/edit-product-media-form.tsx
index 4667564448258..11ab0f748746a 100644
--- a/packages/admin/dashboard/src/routes/products/product-media/components/edit-product-media-form/edit-product-media-form.tsx
+++ b/packages/admin/dashboard/src/routes/products/product-media/components/edit-product-media-form/edit-product-media-form.tsx
@@ -366,6 +366,7 @@ const MediaGridItem = ({
     attributes,
     listeners,
     setNodeRef,
+    setActivatorNodeRef,
     transform,
     transition,
     isDragging,
@@ -379,7 +380,9 @@ const MediaGridItem = ({
 
   return (
     <div
-      className="shadow-elevation-card-rest hover:shadow-elevation-card-hover focus-visible:shadow-borders-focus bg-ui-bg-subtle-hover group relative aspect-square h-auto max-w-full overflow-hidden rounded-lg outline-none"
+      className={clx(
+        "shadow-elevation-card-rest hover:shadow-elevation-card-hover focus-visible:shadow-borders-focus bg-ui-bg-subtle-hover group relative aspect-square h-auto max-w-full overflow-hidden rounded-lg outline-none"
+      )}
       style={style}
       ref={setNodeRef}
     >
@@ -394,6 +397,7 @@ const MediaGridItem = ({
         className={clx("absolute inset-0 cursor-grab touch-none outline-none", {
           "cursor-grabbing": isDragging,
         })}
+        ref={setActivatorNodeRef}
         {...attributes}
         {...listeners}
       />