From 601491e6e25b63c85aa4a94e77ae816fd43a8eff Mon Sep 17 00:00:00 2001 From: Alex Goncharenko Date: Mon, 5 Jun 2023 10:35:40 -0600 Subject: [PATCH 1/5] Update useGridSorting.ts Signed-off-by: Alex Goncharenko --- .../x-data-grid/src/hooks/features/sorting/useGridSorting.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts b/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts index c5fb01768eab4..ff30a7b2ce57c 100644 --- a/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts +++ b/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts @@ -366,7 +366,7 @@ export const useGridSorting = ( /** * EFFECTS */ - React.useEffect(() => { + React.useLayoutEffect(() => { if (props.sortModel !== undefined) { apiRef.current.setSortModel(props.sortModel); } From 4363fe2dcbf3ed625bd91a855310bd0fa1e77c60 Mon Sep 17 00:00:00 2001 From: Alex Goncharenko Date: Mon, 5 Jun 2023 14:48:58 -0600 Subject: [PATCH 2/5] Updated useGridFilter.tsx --- .../x-data-grid/src/hooks/features/filter/useGridFilter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx index a3e7595503585..8a0ac8f67485f 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx @@ -485,7 +485,7 @@ export const useGridFilter = ( /** * EFFECTS */ - React.useEffect(() => { + React.useLayoutEffect(() => { if (props.filterModel !== undefined) { apiRef.current.setFilterModel(props.filterModel); } From a5e615ab4fe72dee33ec19374cb4a549df7d680d Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Tue, 6 Jun 2023 11:52:51 +0200 Subject: [PATCH 3/5] add unit tests for sorting --- .../src/tests/sorting.DataGrid.test.tsx | 70 ++++++++++++++++++- 1 file changed, 69 insertions(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx index c10f6568c574f..aca6e0b84d832 100644 --- a/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils'; +import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/monorepo/test/utils'; import { expect } from 'chai'; import { DataGrid, DataGridProps, GridSortModel, useGridApiRef, GridApi } from '@mui/x-data-grid'; import { getColumnValues, getColumnHeaderCell } from 'test/utils/helperFn'; +import { spy } from 'sinon'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -538,4 +539,71 @@ describe(' - Sorting', () => { act(() => apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }])); expect(getColumnValues(0)).to.deep.equal(['Fila', 'Patagonia', 'Puma']); }); + + it('should update the sorting model on columns change', async () => { + const columns = [{ field: 'id' }, { field: 'brand' }]; + const rows = [ + { id: 0, brand: 'Nike' }, + { id: 1, brand: 'Adidas' }, + { id: 2, brand: 'Puma' }, + ]; + const onSortModelChange = spy(); + + function Demo(props: Omit) { + return ( +
+ +
+ ); + } + const { setProps } = render(); + expect(getColumnValues(1)).to.deep.equal(['Adidas', 'Nike', 'Puma']); + + setProps({ columns: [{ field: 'id' }] }); + await waitFor(() => { + expect(getColumnValues(0)).to.deep.equal(['0', '1', '2']); + expect(onSortModelChange.callCount).to.equal(1); + expect(onSortModelChange.lastCall.firstArg).to.deep.equal([]); + }); + }); + + // See https://github.com/mui/mui-x/issues/9204 + it('should not clear the sorting model when both columns and sortModel change', async () => { + const columns = [{ field: 'id' }, { field: 'brand' }]; + const rows = [ + { id: 0, brand: 'Nike' }, + { id: 1, brand: 'Adidas' }, + { id: 2, brand: 'Puma' }, + ]; + + const onSortModelChange = spy(); + + function Demo(props: Omit) { + return ( +
+ +
+ ); + } + const { setProps } = render(); + expect(getColumnValues(1)).to.deep.equal(['Adidas', 'Nike', 'Puma']); + + setProps({ columns: [{ field: 'id' }], sortModel: [{ field: 'id', sort: 'desc' }] }); + await waitFor(() => { + expect(getColumnValues(0)).to.deep.equal(['2', '1', '0']); + expect(onSortModelChange.callCount).to.equal(0); + }); + }); }); From 1f6ccee83028cd44528104466dde2c92254a072c Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Tue, 6 Jun 2023 11:54:11 +0200 Subject: [PATCH 4/5] useEnhancedEffect --- .../x-data-grid/src/hooks/features/filter/useGridFilter.tsx | 3 ++- .../x-data-grid/src/hooks/features/sorting/useGridSorting.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx index 8a0ac8f67485f..644c0f86331cb 100644 --- a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; import { GridEventListener } from '../../../models/events'; import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; @@ -485,7 +486,7 @@ export const useGridFilter = ( /** * EFFECTS */ - React.useLayoutEffect(() => { + useEnhancedEffect(() => { if (props.filterModel !== undefined) { apiRef.current.setFilterModel(props.filterModel); } diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts b/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts index ff30a7b2ce57c..a5847ddb7527e 100644 --- a/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts +++ b/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; import { GridEventListener } from '../../../models/events'; import { DataGridProcessedProps } from '../../../models/props/DataGridProps'; import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity'; @@ -366,7 +367,7 @@ export const useGridSorting = ( /** * EFFECTS */ - React.useLayoutEffect(() => { + useEnhancedEffect(() => { if (props.sortModel !== undefined) { apiRef.current.setSortModel(props.sortModel); } From d86efe0aaab9135d26f42f4499851552984c6b84 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Tue, 6 Jun 2023 12:08:58 +0200 Subject: [PATCH 5/5] add unit tests for filtering --- .../src/tests/filtering.DataGrid.test.tsx | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx index eabad01e11f18..74c38b517c6c9 100644 --- a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -11,6 +11,7 @@ import { GridToolbar, } from '@mui/x-data-grid'; import { getColumnValues } from 'test/utils/helperFn'; +import { spy } from 'sinon'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -1248,4 +1249,76 @@ describe(' - Filter', () => { ); }).not.to.throw(); }); + + it('should update the filter model on columns change', () => { + const columns = [{ field: 'id' }, { field: 'brand' }]; + const rows = [ + { id: 0, brand: 'Nike' }, + { id: 1, brand: 'Adidas' }, + { id: 2, brand: 'Puma' }, + ]; + const onFilterModelChange = spy(); + + function Demo(props: Omit) { + return ( +
+ +
+ ); + } + const { setProps } = render(); + expect(getColumnValues(1)).to.deep.equal(['Puma']); + + setProps({ columns: [{ field: 'id' }] }); + expect(getColumnValues(0)).to.deep.equal(['0', '1', '2']); + expect(onFilterModelChange.callCount).to.equal(1); + expect(onFilterModelChange.lastCall.firstArg).to.deep.equal({ items: [] }); + }); + + // See https://github.com/mui/mui-x/issues/9204 + it('should not clear the filter model when both columns and filterModel change', async () => { + const columns = [{ field: 'id' }, { field: 'brand' }]; + const rows = [ + { id: 0, brand: 'Nike' }, + { id: 1, brand: 'Adidas' }, + { id: 2, brand: 'Puma' }, + ]; + + const onFilterModelChange = spy(); + + function Demo(props: Omit) { + return ( +
+ +
+ ); + } + const { setProps } = render(); + expect(getColumnValues(1)).to.deep.equal(['Puma']); + + setProps({ + columns: [{ field: 'id' }], + filterModel: { + items: [{ field: 'id', operator: 'equals', value: '1' }], + }, + }); + expect(getColumnValues(0)).to.deep.equal(['1']); + expect(onFilterModelChange.callCount).to.equal(0); + }); });