dragenter event of cells do not bubble in DataGridPro

[bishopj15]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Add dragenter, event listener to parent component
2. Add DateGridPro as a child with some data so that some rows appear
3. Drag File from file explorer directly over a cell

Current behavior 😯

dragenter event of parent never triggers

Expected behavior 🤔

dragenter event of parent triggers

Context 🔦

I have a drag and drop area over a DataGrid that has worked fine until switching to DataGridPro. The dragenter event no longer bubbles up. dragover and dragleave still bubble as expected

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

No response

[MBilalShafi]

Could you provide a minimal reproduction test case with the latest version? This would help identify the issue better. 👷
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[bishopj15]

https://codesandbox.io/s/relaxed-snowflake-s98g93?file=/demo.tsx

Digging a bit deeper I've learned react-dropzone was being used so the issue might actually be in that package. The live example shows the event firing as expected with DataGrid but never firing with DataGridPro

[MBilalShafi]

Thanks for providing the codesandbox. I think the issue is not related to the DataGrid or DataGridPro itself, as the events are listened to by an external element and not the grid, bubbling doesn't happen in this case as the absolute element the events are binded to is above the Grid (due to a higher z-index and absolute positioning).

The reason why it doesn't work for the external elements is because of the semantic positioning of the elements.
I've updated the codesandbox to demonstrate both the Grid variants detecting dragenter event and detecting the dropzone.

Let me know if this solves your use-case?

[bishopj15]

I still see the same behavior in the new example. I don't think it's the positioning. Dragging from system directly over a row cell in DataGridPro does not send up a dragenter the same way DataGrid does. If you drag from anywhere outside the row cell then the event triggers because entering the base of the component does trigger the event in DataGridPro. I've included a GIF demonstrating this

[bishopj15]

@MBilalShafi Have you had a chance to look at the above video? Your example does not show the event

[serhanguney]

I'm having exactly the same problem. I tried to add inline styles for z-index levels and made sure that the parent element is above data grid pro, and still the same problem.

[serhanguney]

As a workaround using onDragOver instead of onDragEnter seems to be working.

[segullshairbutt]

Yeah, I am facing the same problem. I tried to inspect the HTML document through Chrome dev tools and found that virtual-scroller which is handling the virtualization causes these issues. If you make the z-index: -1 of that virtual scroller div. onDragEnter works but the problem is that it hides the content added through the virtualization.

[MBilalShafi]

Sorry about the delayed response @bishopj15. It seems like it's because of the column reorder feature stopping event propagation for drag events, for example:
https://github.com/mui/mui-x/blob/next/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx#L95

If you could live without the column reorder feature, one fix could be to pass the prop disableColumnReorder

I tried this demo and it seems to work as expected for me: https://codesandbox.io/p/sandbox/thirsty-shape-jjfdp9?file=%2FDataGridDemo.tsx, would that work for you?

[bishopj15]

The work around in your demo does not work with the latest version, 6.19.6. I can confirm the demo using version 7 beta does work exactly how I would expect.

I cannot use the beta release but using disableColumnReorder would be fine for my use case. I will use that when version 7 is released.

[MBilalShafi]

Hey @bishopj15, just an FYI, version 7 stable has already been released, let us know if you face any difficulties in migrating to it. Here's the migration guide to help you do it.

Thank you!

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.