DevExtreme DataGrid triggers CraftJS drag during column reorder, and cell interactions grid moves unexpectedly

[rahul-kamble]

Describe the bug

I am using Dev extreme react controls using Craft js.

When integrating DevExtreme DataGrid inside a CraftJS editor canvas, CraftJS incorrectly captures mouse events that originate inside the DataGrid, such as:

Column reorder drag

Because CraftJS intercepts these mouse events, its internal drag logic is triggered unexpectedly.
As a result, the entire grid component moves, even when:

Drag is disabled through actions.setOptions({ enabled: false })

All mouse events are stopped with stopPropagation()

The grid is wrapped with a “shield” div

CSS is used to override pointer-events

This makes DevExtreme DataGrid effectively unusable inside CraftJS.

To Reproduce
Steps to reproduce the behavior:

1. Place a DevExtreme component inside a CraftJS node

2. Disable CraftJS dragging on the component

      DxGrid.craft = {
          rules: { canDrag: () => false }
        };
   

3. Enable column reordering/resizing in DevExtreme:

      <DataGrid allowColumnReordering allowColumnResizing ... />
   

4. Try to reorder or resize a column inside the grid

5. The entire component moves, instead of only the column

Expected behavior
CraftJS should not start drag mode or move the component when interacting with complex UI libraries that use internal mouse events—specifically:

Column reorder (drag)

CraftJS should completely ignore all mouse events from inside the DataGrid.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

Your environment

Software	Version(s)
craft.js	^0.2.7
React	^18.3.1
TypeScript	^4.9.5
Browser	Any Version
npm/Yarn	10.9.2
Operating System	Windows 10