MUIDataTable prevents all Drag&Drop operations on the site

[JohnnyCrazy]

If a MUIDataTable is present on the page, all drag & drop operations on the same site do not work.

Maybe related: https://github.com/react-dnd/react-dnd/issues/3304

Expected Behavior

Rendering a MUIDataTable should not prevent drag & drop operations outside of the table scope.

Current Behavior

No drag & drop operations possible

Steps to Reproduce (for bugs)

https://codesandbox.io/s/mui-datatables-issue-kv4bgu

1. Try to drag a file into the input field --> Nothing happens
2. Click Toggle Table Render
3. Try to drag a file into the input field --> Input field updates with correct filename

Your Environment

Tech	Version
Material-UI	4.12.4
MUI-datatables	3.8.5
React	18
browser	-
etc	-

[pintosack]

I'm experiencing the same issue. After some clicking around and what-not, things seem to start working again, but each time a new table is rendered, I can't drag certain items.

[adnauseum]

This issue was also affecting us too. We have a rich text editor with drag-and-drop variables that depended on the native drag-and-drop browser API (i.e., draggable="true"), which was broken due to this issue in mui-datatables.

None other than the Jett Durham) did some impressive sleuthing and discovered that mui-datatables has a private API for overriding the DnD backend. See https://github.com/gregnb/mui-datatables/blob/master/src/MUIDataTable.js#L2063 After discovering this, he probably whipped out his guitar and got pulled over for playing too fast.

import React from 'react';
import {DndProvider} from 'react-dnd';
import {HTML5Backend} from 'react-dnd-html5-backend';
import DataTable from 'mui-datatables';

/**
 * This component works around a known issue with mui-datatables that breaks
 *   drag and drop functionality on the whole page whenever a table is rendered anywhere on the page
 * The root cause is that the data table does not allow the user to provide their own context,
 *   so the global context is always used.
 * This side-steps the problem by taking advantage of a private API to override the DragDropBackend.
 * This forces the data table not to render its own DnDProvider so we can render our own with a localized context.
 * @see https://github.com/gregnb/mui-datatables/issues/1909
 */
export const MuiDataTableWithFixedDragDrop: typeof DataTable = props => {
  const dnDRef = React.useRef(null);

  return (
    <div ref={dnDRef}>
      {/* @ts-expect-error I assume we have some outdated types here */}
      <DndProvider backend={HTML5Backend} context={dnDRef}>
        <DataTable
          {...props}
          components={{
            ...(props.components ?? {}),
            /**
             * Set this to null so the data table does not provide its own context
             * @see https://github.com/gregnb/mui-datatables/blob/master/src/MUIDataTable.js#L2063
             */
            // @ts-expect-error this prop isn't in the public API
            DragDropBackend: null,
          }}
        />
      </DndProvider>
    </div>
  );
};