Row ordering feature breaks if react-dnd is around

[PeretEtienne]

material-react-table version

1.0.11

Describe the bug and the steps to reproduce it

I was stuck not understanding why the example of row ordering did not work in my app. It looks like it is react-dnd fault because when I commented all react-dnd related stuff, row ordering worked again. I created a codeSandbox to open this issue where I wanted to put a table inside react-dnd DndProvider and one outside of it to show a working one, but it appears that also the table outside DndProvider is broken

Your Minimal, Reproducible Example - Sandbox (Recommended) or code snippets

https://codesandbox.io/s/crazy-davinci-8kuzw2?file=/src/App.js

Screenshots or Videos (Optional)

No response

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

No, because I don't know how

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.

[KevinVandy]

Looks like others have run into this as well. React DnD hijacks all dragging events by default. Looks like they have a solution here?

react-dnd/react-dnd#3304

[PeretEtienne]

Maked my codesandbox worked but not my real app use case, don't know why... Already spent too much time on this, I went for react-beautiful-dnd and it works like a charm 👍

[KevinVandy]

Closing, as this is an issue caused by another library, with working workarounds available

[MohammadElokour]

@PeretEtienne its been a while but wanted a clarification on your last statement,
Did you use react-beautiful-dnd instead of react-dnd in that other part of the project so it would not break the material react table row dnd native functionality or did you use react-beautiful-dnd for the material react table itself?

Currently I'm having the same issue as you did but I'm using @hello-pangea/dnd a fork of react-beautifull-dnd that supports react18 and the material react table row native dnd functionality is not working even when following the examples in the documentation to the T including with my case of having row-ordering with row-selection:
material-react-table.dev/?path=/story/features-row-ordering-examples--row-ordering-with-select

its very odd in my case since I'm sure react-beautifull-dnd api does not overlap with the native HTML dnd api and it seems like thats what material react table is using

[PeretEtienne]

Hi ! I switched from react-dnd to react-beautiful-dnd for the container of my tables. I did not replaced the lib used by material-react-table itself.

It looks something like this now :

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { Box } from '@mui/material';

const Component = () => {

  const renderCard = ([blockName, block], index) => {
    return (
      <Draggable key={blockName} draggableId={blockName} index={index}>
        {(provided, snapshot) => (
          <ReportCard
            id={blockName}
            block={block}
            provided={provided}
            snapshot={snapshot}
          />
        )}
      </Draggable>
    );
  };

  // ...

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <Box ref={provided.innerRef} {...provided.droppableProps}>
            {reportBlocksEntries.map(renderCard)}
            {provided.placeholder}
          </Box>
        )}
      </Droppable>
    </DragDropContext>
  );
};

Tables are in ReportCard and work correctly

[MohammadElokour]

@PeretEtienne thanks for the speedy reply!
I guess I have to investigate more on why its not working as intended, for now when I try to drag it gives me the "not-allowed" cursor and the row is stuck in its place with the faint transparent striped border.

my plan now is to do a mini project to isolate this feature and see what happens.

[PeretEtienne]

A minimal sandbox will help for sure. Good luck for your investigation 👍

[MohammadElokour]

@KevinVandy I found the issue and its because I'm running my application in Tauri not sure why but its not working in the desktop application port but when I run it on the browser the functionality works without any issues

CC: @KevinVandy any Idea why Tauri is clashing with the dnd api?

edit:
Apparently its a known issue in tauri:
tauri-apps/tauri#2014