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

• 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.

[alessandrojcm]

Hi @puehringer thanks for filing this, could you advise what would your proposed solution be? Would it be adding stopPropagation() to the event handlers as in your override? We'd need to check that it does not affect any built-in dnd functionality

[KevinVandy]

If you are using any DND library that breaks native browser drag events, then don't expect the MRT dnd features to work.

[puehringer]

Hi @puehringer thanks for filing this, could you advise what would your proposed solution be? Would it be adding stopPropagation() to the event handlers as in your override? We'd need to check that it does not affect any built-in dnd functionality

We have added the stopPropagation like in the override and have not encountered any issues so far. I agree that this may be a downstream react-mosaic issue, but I also don't see any issues with stopping propagation at the "source", i.e. MRT. Let me know if you need a further example, or if I should draft up a PR 👍

[puehringer]

If you are using any DND library that breaks native browser drag events, then don't expect the MRT dnd features to work.

I agree, I haven't been able to patch it in react-mosaic though. I think it's worth a try to stop propagation at the source, or would that be breaking something? We have been using the override for quite a while now with no issues.

[alessandrojcm]

Hey sorry for the late follow-up, could you draft a PR for this and we can test it with the storybook examples?