search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.57k stars 1.34k forks source link

[DataGridPro] Column reorder causing crash when DataGridPro is in react-dnd-html5-backend context #12322

Open itaybatar opened 9 months ago

itaybatar commented 9 months ago

Steps to reproduce

I am using an existing issue reported here: https://github.com/mui/mui-x/issues/2680 @romgrk asked to open a new one. same example applies for newer versions as well.

Steps:

Go to https://codesandbox.io/s/kind-pine-tostw Try to reorder the columns by Drag n Drop.

Current behavior

When the component tree, which contains the DataGridPro, is wrapped with react-dnd-html5-backend, the column reorder functionality is causing the app to crash.

Expected behavior

Reordering columns should work regardless if the component is rendering under react-dnd provider.

Context

The problem is, that the HTML5Backend of react-dnd hijacks all out of context draggable elements: https://github.com/react-dnd/react-dnd/issues/3304. And since the grid leverages this API, its column reorder feature breaks when used with react-dnd.

One solution that seems to work is described here https://github.com/react-dnd/react-dnd/issues/2868:

It suggests to stop event propagation in onDragStart, onDragEnd and onDrag event listeners.

Your environment

``` react-dnd-html5-backend@16.0.1 react-dnd@16.0.1 @mui/material@5.14.5 @mui/styled-engine@5.13.2 @mui/x-data-grid-pro@6.19.4 Desktop Windows Chrome 109.0.5414.75 ```

Search keywords: react-dnd Order ID: 84169

michelengelen commented 9 months ago

Hey @itaybatar thanks for reporting this. I will add this to our board for the team to have a deeper look into it. Thanks again 🙇🏼

vojtatom commented 4 months ago

Hey guys, any updates on this?

romgrk commented 4 months ago

I can't reproduce the issue, if I reorder the columns the app does not crash. Can you clarify the steps and/or provide a recording?

For those landing here, the react-dnd link in the top comment has a workaround, you can add stop propagation handlers on the grid's wrapping div.

obi-awyss commented 3 months ago

Wrapping the DataGrid with this avoids the issue:

<div onDrop={(e) => e.stopPropagation()}>
  <DataGrid
    ...
  />
</div>
vojtatom commented 3 months ago

Wrapping the DataGrid with this avoids the issue:

<div onDrop={(e) => e.stopPropagation()}>
  <DataGrid
    ...
  />
</div>

This solved it for me, thanks!