mui
[DataGridPro] Column reorder causing crash when DataGridPro is in react-dnd-html5-backend context
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
[email protected]
[email protected]
@mui/[email protected]
@mui/[email protected]
@mui/[email protected]
Desktop Windows Chrome 109.0.5414.75
Search keywords: react-dnd Order ID: 84169
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 🙇🏼
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.
Wrapping the DataGrid with this avoids the issue:
<div onDrop={(e) => e.stopPropagation()}>
<DataGrid
...
/>
</div>
Wrapping the DataGrid with this avoids the issue:
<div onDrop={(e) => e.stopPropagation()}> <DataGrid ... /> </div>
This solved it for me, thanks!