Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 task done
puehringer opened this issue Aug 6, 2024 · 5 comments · May be fixed by #438
Open
1 task done

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

puehringer opened this issue Aug 6, 2024 · 5 comments · May be fixed by #438
Labels
bug Something isn't working V2 Issue with MRT V2

Comments

@puehringer
Copy link

puehringer commented Aug 6, 2024 •
edited
Loading

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
Copy link
Collaborator

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

@alessandrojcm alessandrojcm added bug Something isn't working V2 Issue with MRT V2 labels Aug 14, 2024
@KevinVandy
Copy link
Owner

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

@puehringer
Copy link
Author

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
Copy link
Author

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
Copy link
Collaborator

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

@puehringer puehringer linked a pull request Nov 8, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working V2 Issue with MRT V2
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: add stopPropagation calls to dnd handlers puehringer/mantine-react-table
3 participants
@alessandrojcm @KevinVandy @puehringer