[DataGrid] Fix quickfilter & aggregation error (#9729)

mui · Jul 21, 2023 · a22d608 · a22d608
1 parent f908c2a
commit a22d608
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 6 deletions.
diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts b/packages/grid/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { unstable_capitalize as capitalize } from '@mui/utils';
+import { GRID_ID_AUTOGENERATED } from '@mui/x-data-grid/internals';
 import {
   GridColDef,
   GridFooterNode,
@@ -181,10 +182,11 @@ export const addFooterRows = ({
     const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
 
     if (shouldHaveFooter) {
+      const rowId = getAggregationFooterRowIdFromGroupId(null);
       newGroupingParams = addPinnedRow({
         groupingParams: newGroupingParams,
-        rowModel: undefined,
-        rowId: getAggregationFooterRowIdFromGroupId(null),
+        rowModel: { [GRID_ID_AUTOGENERATED]: rowId },
+        rowId,
         position: 'bottom',
         apiRef,
         isAutoGenerated: true,

diff --git a/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/DataGridPremium.test.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { createRenderer, act } from '@mui/monorepo/test/utils';
+import { expect } from 'chai';
+import {
+  DataGridPremium as DataGrid,
+  DataGridPremiumProps as DataGridProps,
+  GridApi,
+  GridToolbar,
+  useGridApiRef,
+} from '@mui/x-data-grid-premium';
+import { getColumnValues } from 'test/utils/helperFn';
+
+const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+describe('<DataGrid /> - Quick Filter', () => {
+  const { render } = createRenderer();
+
+  const baselineProps = {
+    autoHeight: isJSDOM,
+    disableVirtualization: true,
+    rows: [
+      {
+        id: 0,
+        brand: 'Nike',
+      },
+      {
+        id: 1,
+        brand: 'Adidas',
+      },
+      {
+        id: 2,
+        brand: 'Puma',
+      },
+    ],
+    columns: [{ field: 'brand' }],
+  };
+
+  let apiRef: React.MutableRefObject<GridApi>;
+
+  function TestCase(props: Partial<DataGridProps>) {
+    apiRef = useGridApiRef();
+
+    return (
+      <div style={{ width: 300, height: 300 }}>
+        <DataGrid
+          {...baselineProps}
+          apiRef={apiRef}
+          slots={{ toolbar: GridToolbar }}
+          disableColumnSelector
+          disableDensitySelector
+          disableColumnFilter
+          {...props}
+          slotProps={{
+            ...props?.slotProps,
+            toolbar: {
+              showQuickFilter: true,
+              ...props?.slotProps?.toolbar,
+            },
+          }}
+        />
+      </div>
+    );
+  }
+
+  // https://github.com/mui/mui-x/issues/9677
+  it('should not fail when adding a grouping criterion', () => {
+    const { setProps } = render(
+      <TestCase
+        rows={[
+          {
+            id: 1,
+            company: '20th Century Fox',
+            director: 'James Cameron',
+            year: 1999,
+            title: 'Titanic',
+          },
+        ]}
+        columns={[
+          { field: 'company' },
+          { field: 'director' },
+          { field: 'year' },
+          { field: 'title' },
+        ]}
+        initialState={{
+          rowGrouping: {
+            model: ['company'],
+          },
+          aggregation: {
+            model: {
+              director: 'size',
+            },
+          },
+        }}
+      />,
+    );
+
+    act(() => apiRef.current.addRowGroupingCriteria('year'));
+
+    setProps({
+      filterModel: {
+        items: [],
+        quickFilterValues: ['Cameron'],
+      },
+    });
+
+    expect(getColumnValues(0)).to.deep.equal(['20th Century Fox (1)', '']);
+  });
+});
diff --git a/...ages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts b/...ages/grid/x-data-grid-pro/src/hooks/features/rowPinning/useGridRowPinningPreProcessors.ts
@@ -27,7 +27,7 @@ export function addPinnedRow({
   isAutoGenerated,
 }: {
   groupingParams: GridHydrateRowsValue;
-  rowModel: GridRowModel | undefined;
+  rowModel: GridRowModel;
   rowId: GridRowId;
   position: GridPinnedRowPosition;
   apiRef: React.MutableRefObject<GridPrivateApiPro>;
@@ -51,7 +51,7 @@ export function addPinnedRow({
   insertNodeInTree(node, tree, treeDepths, null);
 
   if (!isAutoGenerated) {
-    dataRowIdToModelLookup[rowId] = rowModel!;
+    dataRowIdToModelLookup[rowId] = rowModel;
     dataRowIdToIdLookup[rowId] = rowId;
   }
   // Do not push it to ids list so that pagination is not affected by pinned rows
@@ -61,7 +61,7 @@ export function addPinnedRow({
 
   const previousPinnedRows = groupingParams.additionalRowGroups?.pinnedRows || {};
 
-  const newPinnedRow: GridRowEntry = { id: rowId, model: rowModel! };
+  const newPinnedRow: GridRowEntry = { id: rowId, model: rowModel };
 
   if (groupingParams.additionalRowGroups?.pinnedRows?.[position]?.includes(newPinnedRow)) {
     return {

diff --git a/packages/grid/x-data-grid/src/internals/index.ts b/packages/grid/x-data-grid/src/internals/index.ts
@@ -87,7 +87,7 @@ export type {
 export { getTreeNodeDescendants, buildRootGroup } from '../hooks/features/rows/gridRowsUtils';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
-export { getRowIdFromRowModel } from '../hooks/features/rows/gridRowsUtils';
+export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from '../hooks/features/rows/gridRowsUtils';
 export {
   gridAdditionalRowGroupsSelector,
   gridPinnedRowsSelector,