Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DataGridPremium] Fix onCellSelectionModelChange not triggered when additional cell range is selected #14199

Merged
merged 2 commits into from
Aug 21, 2024
+39 −2
Merged

[DataGridPremium] Fix onCellSelectionModelChange not triggered when additional cell range is selected #14199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9042979
Create another object for the state update to trigger cell selection …
arminmeh Aug 14, 2024
800d54f
Add tests
arminmeh Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts
View file
Open in desktop
arminmeh marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -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]) {
Expand Down
39 changes: 38 additions & 1 deletion packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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', () => {
Expand Down