[DataGridPremium] Fix onCellSelectionModelChange not triggered when…

… additional cell range is selected (#14199)
mui · Aug 21, 2024 · 7aaecf5 · 7aaecf5
1 parent 3fb2093
commit 7aaecf5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
@@ -146,7 +146,7 @@ export const useGridCellSelection = (
       const rowsInRange = visibleRows.rows.slice(finalStartRowIndex, finalEndRowIndex + 1);
       const columnsInRange = visibleColumns.slice(finalStartColumnIndex, finalEndColumnIndex + 1);
 
-      const newModel = keepOtherSelected ? apiRef.current.getCellSelectionModel() : {};
+      const newModel = keepOtherSelected ? { ...apiRef.current.getCellSelectionModel() } : {};
 
       rowsInRange.forEach((row) => {
         if (!newModel[row.id]) {

diff --git a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { stub, SinonStub } from 'sinon';
+import { stub, SinonStub, spy } from 'sinon';
 import { expect } from 'chai';
 import { spyApi, getCell, grid } from 'test/utils/helperFn';
 import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils';
@@ -240,6 +240,43 @@ describe('<DataGridPremium /> - Cell selection', () => {
     });
   });
 
+  describe('onCellSelectionModelChange', () => {
+    it('should update the selection state when a cell is selected', () => {
+      const onCellSelectionModelChange = spy();
+      render(
+        <TestDataGridSelection
+          cellSelectionModel={{}}
+          onCellSelectionModelChange={onCellSelectionModelChange}
+        />,
+      );
+      fireEvent.click(getCell(0, 0));
+
+      expect(onCellSelectionModelChange.callCount).to.equal(1);
+      expect(onCellSelectionModelChange.lastCall.args[0]).to.deep.equal({ '0': { id: true } });
+    });
+
+    // Context: https://github.com/mui/mui-x/issues/14184
+    it('should add the new cell selection range to the existing state', () => {
+      const onCellSelectionModelChange = spy();
+      render(
+        <TestDataGridSelection
+          cellSelectionModel={{ '0': { id: true } }}
+          onCellSelectionModelChange={onCellSelectionModelChange}
+        />,
+      );
+
+      // Add a new cell range to the selection
+      fireEvent.mouseDown(getCell(2, 0), { ctrlKey: true });
+      fireEvent.mouseOver(getCell(3, 0), { ctrlKey: true });
+
+      expect(onCellSelectionModelChange.lastCall.args[0]).to.deep.equal({
+        '0': { id: true },
+        '2': { id: true },
+        '3': { id: true },
+      });
+    });
+  });
+
   describe('apiRef', () => {
     describe('selectCellRange', () => {
       it('should select all cells within the given arguments if end > start', () => {