From 129709a0e643a9c08b781b6af8fd2da757eb93ae Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Tue, 7 Nov 2023 17:05:40 +0100
Subject: [PATCH] [DataGridPro] Autosize Columns - Headers being cut off
 (#10666)

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../hooks/features/columnResize/useGridColumnResize.tsx   | 8 +++++++-
 .../src/tests/columns.DataGridPro.test.tsx                | 8 ++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
index dd78724ddcf33..eed1b3bb4b8ae 100644
--- a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
+++ b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -225,12 +225,18 @@ function extractColumnWidths(
       if (header) {
         const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`);
         const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`)!;
+        const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
+        const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
         const element = title ?? content;
 
         const style = window.getComputedStyle(header, null);
         const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
         const contentWidth = element.scrollWidth + 1;
-        const width = paddingWidth + contentWidth;
+        const width =
+          contentWidth +
+          paddingWidth +
+          (iconContainer?.clientWidth ?? 0) +
+          (menuContainer?.clientWidth ?? 0);
 
         filteredWidths.push(width);
       }
diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
index fab2eb10e9eee..db13d896f4542 100644
--- a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
+++ b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -450,7 +450,7 @@ describe('<DataGridPro /> - Columns', () => {
       render(<Test rows={rows} columns={columns} />);
       await apiRef.current.autosizeColumns();
       await microtasks();
-      expect(getWidths()).to.deep.equal([155, 177]);
+      expect(getWidths()).to.deep.equal([213, 235]);
     });
 
     it('should work through double-clicking the separator', async () => {
@@ -460,14 +460,14 @@ describe('<DataGridPro /> - Columns', () => {
       )[1];
       fireEvent.doubleClick(separator);
       await microtasks();
-      expect(getWidths()).to.deep.equal([100, 177]);
+      expect(getWidths()).to.deep.equal([100, 235]);
     });
 
     it('should work on mount', async () => {
       render(<Test rows={rows} columns={columns} autosizeOnMount />);
       await microtasks(); /* first effect after render */
       await microtasks(); /* async autosize operation */
-      expect(getWidths()).to.deep.equal([155, 177]);
+      expect(getWidths()).to.deep.equal([213, 235]);
     });
 
     describe('options', () => {
@@ -482,7 +482,7 @@ describe('<DataGridPro /> - Columns', () => {
         await autosize({ columns: [columns[0].field] }, [50, 100]);
       });
       it('.includeHeaders works', async () => {
-        await autosize({ includeHeaders: true }, [155, 177]);
+        await autosize({ includeHeaders: true }, [213, 235]);
       });
       it('.includeOutliers works', async () => {
         await autosize({ includeOutliers: true }, [50, 144]);