Uncaught TypeError: Cannot read property 'offsetParent' of undefined when draggableColumns is enabled

[achmadk]

Expected Behavior

Draggable columns can work properly

Current Behavior

Get error Uncaught TypeError: Cannot read property 'offsetParent' of undefined

Steps to Reproduce (for bugs)

1. Open https://dashboard-preview.web.app/timah, please wait until all charts and tables has been loaded.
2. Click inspect element, then open console tab.
3. Select table you want to drag its column, e.g. Tender Amount by Vendor.
4. Drag one column inside that table.
5. When that column is dragging, check the console that displays Uncaught TypeError: Cannot read property 'offsetParent' of undefined.

Your Environment

Tech	Version
@material-ui/core	4.10.2
mui-datatables	3.1.0
react	16.13.1
browser	Google Chrome on Linux (Ubuntu 20.04)

[patorjk]

Yikes, that's a bad bug :/. It only happens when selectableRows: "none". I've got a fix in development. I'm going to do a little more testing and hopefully push a 3.1.1 version a little later tonight.

[achmadk]

thanks for your quick response, @patorjk .

[patorjk]

No problem, thank you for the quick report! I've push out a 3.1.1 patch that has draggable columns working when selectableRows="none". If you see anything else please let me know.

[achmadk]

I have updated mui-datatables to 3.1.1. I have forgot that the website use iframe. Drag and drop feature still doesn't work for me. Only display warning both [Violation] 'dragstart' and [Violation] 'drop' handler into console tab.

[patorjk]

Can you show me an example? I can't seem to re-create this.

[patorjk]

I'm aiming to do another patch release tonight. I'm not sure if this will solve your problem, but if you have a moment can you try this beta version:

npm install mui-datatables@3.1.2-beta.0

[achmadk]

sorry, that beta version still doesn't fix this issue.

[patorjk]

Can you show me an example? I'm unable to reproduce the problem.

[wdh2100]

@patorjk

I think I need to pass window to use it in iframe

ref :

• https://react-dnd.github.io/react-dnd/examples/dustbin/iframe
• https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/01-dustbin/single-target-in-iframe?from-embed=&file=/src/Container.jsx:335-354