Chrome crashes when dragging a react-dnd enabled div containing a complex material-ui table
theirishpenguin opened this issue · comments
Description
When I try to drag a react-dnd enabled div containing a complex material-ui table in Chrome then the HTML 5 backend does not correctly snapshot the drag source - instead it just displays a slightly different mouse cursor.
(Sidenote: On my machine, when I "drop" the table on the target my browser crashes. Sometimes I even get booted out of my Linux desktop as a result - at a guess this is some "infinite loop"-like situation causing chrome to runaway and starve the system of resources. But I cannot reproduce this more severe version of the bug on another machine).
The above issue(s) do not happen in firefox, which initially made me think that it is the webkit issue described at #18 (comment)
However, I have tried the suggested workaround but I still get the issue. It is possible that there I have missed the application of the workaround to one of the div's that the material-ui table generates but I think I had gotten them all.
I have a test case based on the "01 Dustbin" example that comes with react-dnd. Basically, I have forked the react-dnd repo, added in the material-ui package and tweaked the dustbin example to put a material-ui table the boxes that are dragged.
Example of bug
theirishpenguin/react-dnd@c51a1b3
(Just visit the dustbin example when you once you have your local server running - ie. http://localhost:8080/examples-dustbin-single-target.html)
Example without bug (ie. when I use a simpler material-ui table)
theirishpenguin/react-dnd@2fbe03c
(Again, just visit the dustbin example when you once you have your local server running at http://localhost:8080/examples-dustbin-single-target.html)
Note: If you diff the above commits you can see the exact differences.
Versions
- Material-UI: 0.16.6
- React: 15.4.1
- Browser: Version 52.0.2743.116 (64-bit)
Related
I had previously opened this bug on the material-ui github issue tracker (mui/material-ui#5898) but moved it here once I had a working test case.
I have refined the Dustbin test case. It is the table header tooltips in material-ui that are causing the problem.
The left hand side of the this diff works fine, the right hand side exhibits the problem...
Same issue with an item containing react-tooltip component.