[DataGrid] Fix pagination when pagination={undefined} (mui#13349)

Co-authored-by: Rom Grk <romgrk.cc@gmail.com>
DungTiger · Jul 23, 2024 · 0211a3a · 0211a3a
1 parent 6a3adbf
commit 0211a3a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts
@@ -104,14 +104,26 @@ export const useDataGridProps = <R extends GridValidRowModel>(inProps: DataGridP
     [themedProps.slots],
   );
 
+  const injectDefaultProps = React.useMemo(() => {
+    return (
+      Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES) as Array<
+        keyof DataGridPropsWithDefaultValues<any>
+      >
+    ).reduce((acc, key) => {
+      // @ts-ignore
+      acc[key] = themedProps[key] ?? DATA_GRID_PROPS_DEFAULT_VALUES[key];
+      return acc;
+    }, {} as DataGridPropsWithDefaultValues<any>);
+  }, [themedProps]);
+
   return React.useMemo<DataGridProcessedProps<R>>(
     () => ({
-      ...DATA_GRID_PROPS_DEFAULT_VALUES,
       ...themedProps,
+      ...injectDefaultProps,
       localeText,
       slots,
       ...DATA_GRID_FORCED_PROPS,
     }),
-    [themedProps, localeText, slots],
+    [themedProps, localeText, slots, injectDefaultProps],
   );
 };
diff --git a/packages/x-data-grid/src/tests/DataGrid.test.tsx b/packages/x-data-grid/src/tests/DataGrid.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import { expect } from 'chai';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
@@ -62,4 +62,34 @@ describe('<DataGrid />', () => {
       </div>,
     );
   });
+
+  it('should not cause unexpected behavior when props are explictly set to undefined', () => {
+    const rows = [
+      { id: 'a', col1: 'Hello', col2: 'World' },
+      { id: 'constructor', col1: 'DataGridPro', col2: 'is Awesome' },
+      { id: 'hasOwnProperty', col1: 'MUI', col2: 'is Amazing' },
+    ];
+
+    const columns = [
+      { field: 'col1', headerName: 'Column 1', width: 150 },
+      { field: 'col2', headerName: 'Column 2', width: 150 },
+    ];
+    expect(() => {
+      render(
+        <DataGrid
+          {...(
+            Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES) as Array<
+              keyof typeof DATA_GRID_PROPS_DEFAULT_VALUES
+            >
+          ).reduce((acc, key) => {
+            // @ts-ignore
+            acc[key] = undefined;
+            return acc;
+          }, {})}
+          rows={rows}
+          columns={columns}
+        />,
+      );
+    }).not.toErrorDev();
+  });
 });