From 59c2f558f2789aa07d0f26c12ad1756b5ae52a52 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 10 Oct 2024 14:41:46 +0500 Subject: [PATCH 1/4] [DataGrid] Fix onRowSelectionModelChange firing unnecessarily on initial render --- .../src/tests/rowSelection.DataGridPro.test.tsx | 17 +++++++++++++++++ .../rowSelection/useGridRowSelection.ts | 5 +++++ 2 files changed, 22 insertions(+) diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index 23994a6684d0f..19f66f3dc1213 100644 --- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -201,6 +201,23 @@ describe(' - Row selection', () => { expect(getCell(1, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true'); }); + // Context: https://github.com/mui/mui-x/issues/14859 + it('should not throw when controlling a selection model', () => { + function TestDataGrid(props: Partial) { + const [selectionModel, setSelectionModel] = React.useState([]); + return ( + + ); + } + expect(() => { + render(); + }).not.to.throw(); + }); + describe('prop: checkboxSelectionVisibleOnly = false', () => { it('should select all rows of all pages if no row is selected', () => { render( diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts index d50883fa5c366..fcbdab88a2d96 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts +++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts @@ -442,8 +442,13 @@ export const useGridRowSelection = ( /* * EVENTS */ + const isFirstRender = React.useRef(true); const removeOutdatedSelection = React.useCallback( (sortModelUpdated = false) => { + if (isFirstRender.current) { + isFirstRender.current = false; + return; + } const currentSelection = gridRowSelectionStateSelector(apiRef.current.state); const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef); From 44741b9423c5c44cebe34fccc0d1d1809afac814 Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 10 Oct 2024 14:48:08 +0500 Subject: [PATCH 2/4] Remove unnecessary stuff --- .../src/tests/rowSelection.DataGridPro.test.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index 19f66f3dc1213..c210db8aad7b5 100644 --- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -203,11 +203,10 @@ describe(' - Row selection', () => { // Context: https://github.com/mui/mui-x/issues/14859 it('should not throw when controlling a selection model', () => { - function TestDataGrid(props: Partial) { + function TestDataGrid() { const [selectionModel, setSelectionModel] = React.useState([]); return ( From 3e1a1fd0adb520a22de033bfbf4cceca5d4d6ecf Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Thu, 10 Oct 2024 15:18:14 +0500 Subject: [PATCH 3/4] Fix types --- .../src/tests/rowSelection.DataGridPro.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx index c210db8aad7b5..fdf3990d7767d 100644 --- a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx @@ -204,11 +204,11 @@ describe(' - Row selection', () => { // Context: https://github.com/mui/mui-x/issues/14859 it('should not throw when controlling a selection model', () => { function TestDataGrid() { - const [selectionModel, setSelectionModel] = React.useState([]); + const [rowSelectionModel, setRowSelectionModel] = React.useState([]); return ( ); } From 532a1bf4c2b263744879bee82806542a7b52235d Mon Sep 17 00:00:00 2001 From: Bilal Shafi Date: Fri, 11 Oct 2024 16:29:06 +0500 Subject: [PATCH 4/4] Move first render marked in an effect --- .../src/hooks/features/rowSelection/useGridRowSelection.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts index fcbdab88a2d96..9d5b7f8e0aa34 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts +++ b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts @@ -446,7 +446,6 @@ export const useGridRowSelection = ( const removeOutdatedSelection = React.useCallback( (sortModelUpdated = false) => { if (isFirstRender.current) { - isFirstRender.current = false; return; } const currentSelection = gridRowSelectionStateSelector(apiRef.current.state); @@ -762,4 +761,10 @@ export const useGridRowSelection = ( React.useEffect(() => { runIfRowSelectionIsEnabled(removeOutdatedSelection); }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]); + + React.useEffect(() => { + if (isFirstRender.current) { + isFirstRender.current = false; + } + }, []); };