From b55b71119c4a33026e77d94147e13d6d6fb28e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20P=C3=BChringer?=
 <51900829+puehringer@users.noreply.github.com>
Date: Fri, 8 Nov 2024 12:59:17 +0100
Subject: [PATCH] fix: add stopPropagation calls to dnd handlers

---
 .../src/components/body/MRT_TableBodyRowGrabHandle.tsx     | 2 ++
 .../src/components/head/MRT_TableHeadCellGrabHandle.tsx    | 2 ++
 .../src/components/menus/MRT_ShowHideColumnsMenuItems.tsx  | 7 +++++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx
index 65ba778a2..94b3dd816 100644
--- a/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx
+++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx
@@ -33,12 +33,14 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
     actionIconProps?.onDragStart?.(event);
     event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
     table.setDraggingRow(row as any);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
     actionIconProps?.onDragEnd?.(event);
     table.setDraggingRow(null);
     table.setHoveredRow(null);
diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx
index bb1c18f3d..62a951ffa 100644
--- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx
+++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCellGrabHandle.tsx
@@ -41,6 +41,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
     actionIconProps?.onDragStart?.(event);
     setDraggingColumn(column);
     event.dataTransfer.setDragImage(
@@ -51,6 +52,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
     actionIconProps?.onDragEnd?.(event);
     if (hoveredColumn?.id === 'drop-zone') {
       column.toggleGrouping();
diff --git a/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx b/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
index 0ee3411ee..56105522e 100644
--- a/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
+++ b/packages/mantine-react-table/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx
@@ -75,11 +75,13 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   const [isDragging, setIsDragging] = useState(false);
 
   const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     setIsDragging(true);
     e.dataTransfer.setDragImage(menuItemRef.current as HTMLElement, 0, 0);
   };
 
-  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
+  const handleDragEnd = (e: DragEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     setIsDragging(false);
     setHoveredColumn(null);
     if (hoveredColumn) {
@@ -87,7 +89,8 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     }
   };
 
-  const handleDragEnter = (_e: DragEvent) => {
+  const handleDragEnter = (e: DragEvent) => {
+    e.stopPropagation();
     if (!isDragging && columnDef.enableColumnOrdering !== false) {
       setHoveredColumn(column);
     }