From 0211a3a2700cbf405904b680374245191ee8beb8 Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Thu, 4 Jul 2024 08:52:46 +0530
Subject: [PATCH] [DataGrid] Fix pagination when `pagination={undefined}`
 (#13349)

Co-authored-by: Rom Grk <romgrk.cc@gmail.com>
---
 .../src/DataGrid/useDataGridProps.ts          | 16 ++++++++--
 .../x-data-grid/src/tests/DataGrid.test.tsx   | 32 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/packages/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/x-data-grid/src/DataGrid/useDataGridProps.ts
index 89ace1f6d061d..2af3393e1ea14 100644
--- 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
index 17011096eb2df..f058407dc45fb 100644
--- 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();
+  });
 });