Drag and drop features are not working when used in combination with react-mosaic-component

[puehringer]

mantine-react-table version

v2.0.0-beta.6

react & react-dom versions

v18

Describe the bug and the steps to reproduce it

Drag and drop features are not working when used in combination with other libraries which are relying on drag/drop events.

We are currently patching the dist/index.esm.mjs with the overrides below to make it work. It could be that we just have to add stopPropagation() to all drag related events to fix this.

Let me know if more input is needed, and thanks for the great library and the work on v2!

@@ -579,12 +579,16 @@ const MRT_TableBodyRowGrabHandle = (_a) => {
         table,
     })), rest);
     const handleDragStart = (event) => {
+        // Added because react-mosaic uses react-dnd which breaks dragging: https://github.com/react-dnd/react-dnd/issues/2868#issue-745819161
+        event.stopPropagation();
         var _a;
         (_a = actionIconProps === null || actionIconProps === void 0 ? void 0 : actionIconProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(actionIconProps, event);
         event.dataTransfer.setDragImage(rowRef.current, 0, 0);
         table.setDraggingRow(row);
     };
     const handleDragEnd = (event) => {
+        // Added because react-mosaic uses react-dnd which breaks dragging: https://github.com/react-dnd/react-dnd/issues/2868#issue-745819161
+        event.stopPropagation();
         var _a;
         (_a = actionIconProps === null || actionIconProps === void 0 ? void 0 : actionIconProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(actionIconProps, event);
         table.setDraggingRow(null);
@@ -2646,12 +2650,16 @@ const MRT_TableHeadCellGrabHandle = (_a) => {
     const arg = { column, table };
     const actionIconProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(mantineColumnDragHandleProps, arg)), parseFromValuesOrFunc(columnDef.mantineColumnDragHandleProps, arg)), rest);
     const handleDragStart = (event) => {
+        // Added because react-mosaic uses react-dnd which breaks dragging: https://github.com/react-dnd/react-dnd/issues/2868#issue-745819161
+        event.stopPropagation();
         var _a;
         (_a = actionIconProps === null || actionIconProps === void 0 ? void 0 : actionIconProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(actionIconProps, event);
         setDraggingColumn(column);
         event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
     };
     const handleDragEnd = (event) => {
+        // Added because react-mosaic uses react-dnd which breaks dragging: https://github.com/react-dnd/react-dnd/issues/2868#issue-745819161
+        event.stopPropagation();
         var _a;
         (_a = actionIconProps === null || actionIconProps === void 0 ? void 0 : actionIconProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(actionIconProps, event);
         if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
@@ -3175,10 +3183,14 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, setHo
     const menuItemRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
     const handleDragStart = (e) => {
+        // Added because react-mosaic uses react-dnd which breaks dragging: https://github.com/react-dnd/react-dnd/issues/2868#issue-745819161
+        e.stopPropagation();
         setIsDragging(true);
         e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
     };
     const handleDragEnd = (_e) => {
+        // Added because react-mosaic uses react-dnd which breaks dragging: https://github.com/react-dnd/react-dnd/issues/2868#issue-745819161
+        _e.stopPropagation();
         setIsDragging(false);
         setHoveredColumn(null);
         if (hoveredColumn) {
@@ -3186,6 +3198,8 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, setHo
         }
     };
     const handleDragEnter = (_e) => {
+        // Added because react-mosaic uses react-dnd which breaks dragging: https://github.com/react-dnd/react-dnd/issues/2868#issue-745819161
+        _e.stopPropagation();
         if (!isDragging && columnDef.enableColumnOrdering !== false) {
             setHoveredColumn(column);
         }

Minimal, Reproducible Example - (Optional, but Recommended)

https://codesandbox.io/p/devbox/throbbing-cache-w6k7d2?file=%2Fsrc%2FTS.tsx%3A46%2C16

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Yes, I think I know how to fix it and will discuss it in the comments of this issue

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.