From 7aaecf5fb666e05bd16b8f1ebcac37cdc1d27fd6 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Wed, 21 Aug 2024 21:30:20 +0200
Subject: [PATCH] [DataGridPremium] Fix `onCellSelectionModelChange` not
 triggered when additional cell range is selected (#14199)

---
 .../cellSelection/useGridCellSelection.ts     |  2 +-
 .../cellSelection.DataGridPremium.test.tsx    | 39 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 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
index 5c4e3020ba61..d36c314e6292 100644
--- 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
index 09efe492a468..1918719266a1 100644
--- 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', () => {