[DataGridPro] Stop drag event propagation (#2987)

mui · Oct 28, 2021 · 925ad72 · 925ad72
1 parent 77255d3
commit 925ad72
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx
@@ -62,6 +62,9 @@ export const useGridColumnReorder = (
       }
 
       logger.debug(`Start dragging col ${params.field}`);
+      // Prevent drag events propagation.
+      // For more information check here https://github.com/mui-org/material-ui-x/issues/2680.
+      event.stopPropagation();
 
       dragColNode.current = event.currentTarget;
       dragColNode.current.classList.add(gridClasses['columnSeparator--dragging']);
@@ -84,6 +87,9 @@ export const useGridColumnReorder = (
   const handleDragEnter = React.useCallback(
     (params: GridColumnHeaderParams | GridCellParams, event: React.DragEvent<HTMLElement>) => {
       event.preventDefault();
+      // Prevent drag events propagation.
+      // For more information check here https://github.com/mui-org/material-ui-x/issues/2680.
+      event.stopPropagation();
     },
     [],
   );
@@ -96,6 +102,9 @@ export const useGridColumnReorder = (
 
       logger.debug(`Dragging over col ${params.field}`);
       event.preventDefault();
+      // Prevent drag events propagation.
+      // For more information check here https://github.com/mui-org/material-ui-x/issues/2680.
+      event.stopPropagation();
 
       const coordinates = { x: event.clientX, y: event.clientY };
 
@@ -137,6 +146,9 @@ export const useGridColumnReorder = (
 
       logger.debug('End dragging col');
       event.preventDefault();
+      // Prevent drag events propagation.
+      // For more information check here https://github.com/mui-org/material-ui-x/issues/2680.
+      event.stopPropagation();
 
       clearTimeout(removeDnDStylesTimeout.current);
       dragColNode.current = null;

diff --git a/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx b/packages/grid/x-grid/src/tests/reorder.DataGridPro.test.tsx
@@ -21,6 +21,8 @@ import {
   DataGridPro,
   GRID_COLUMN_HEADER_DRAGGING_CSS_CLASS,
 } from '@mui/x-data-grid-pro';
+import { useData } from 'storybook/src/hooks/useData';
+import { spy } from 'sinon';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -225,6 +227,48 @@ describe('<DataGridPro /> - Reorder', () => {
     expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'desc', 'type']);
   });
 
+  it('should prevent drag events propagation', () => {
+    const handleDragStart = spy();
+    const handleDragEnter = spy();
+    const handleDragOver = spy();
+    const handleDragEnd = spy();
+    let apiRef: GridApiRef;
+    const Test = () => {
+      apiRef = useGridApiRef();
+      const data = useData(1, 3);
+
+      return (
+        <div
+          draggable
+          onDragStart={handleDragStart}
+          onDragEnter={handleDragEnter}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+          style={{ width: 300, height: 300 }}
+        >
+          <DataGridPro apiRef={apiRef} {...data} />
+        </div>
+      );
+    };
+
+    render(<Test />);
+
+    const dragCol = getColumnHeaderCell(0).firstChild!;
+    const targetCell = getCell(0, 2)!;
+
+    fireEvent.dragStart(dragCol);
+    fireEvent.dragEnter(targetCell);
+    const dragOverEvent = createDragOverEvent(targetCell);
+    fireEvent(targetCell, dragOverEvent);
+    const dragEndEvent = createDragEndEvent(dragCol);
+    fireEvent(dragCol, dragEndEvent);
+
+    expect(handleDragStart.callCount).to.equal(0);
+    expect(handleDragEnter.callCount).to.equal(0);
+    expect(handleDragOver.callCount).to.equal(0);
+    expect(handleDragEnd.callCount).to.equal(0);
+  });
+
   describe('column disableReorder', () => {
     it('should not allow to start dragging a column with disableReorder=true', () => {
       let apiRef: GridApiRef;