@mui/x-data-grid 7.29.12 → 7.29.13

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.29.13
+
+_Apr 27, 2026_
+
+We'd like to extend a big thank you to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+The following are all team members who have contributed to this release:
+@arminmeh, @dav-is, @LukasTy, @michelengelen
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.29.13`
+
+- [DataGrid] Prevent repeated `hasScrollbar` state updates (#21849) @arminmeh
+
+#### `@mui/x-data-grid-pro@7.29.13` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@7.29.13`.
+
+#### `@mui/x-data-grid-premium@7.29.13` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@7.29.13`.
+
+### Docs
+
+- [docs] Add `v9` as root path link and move `v8` under subpath (#22037) @LukasTy
+- [docs] Add check for auto-generated group rows in `renderCountry` (#22143) @michelengelen
+- [docs] Remove obsolete v7 deprecation warning for `dayOfWeekFormatter` (@LukasTy) (#22121)
+
+### Miscellaneous
+
+- [docs-infra] Set `SEARCH_INDEX` Env for v7 (#21876) @dav-is
+
 ## 7.29.12
 
 _Nov 26, 2025_

package/hooks/features/dimensions/useGridDimensions.js

@@ -67,6 +67,21 @@ export function useGridDimensions(apiRef, props) {
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
   const isFirstSizing = React.useRef(true);
+
+  // Vertical scrollbar oscillation detector.
+  // Counts consecutive hasScrollY flips that happen with no row-height change.
+  // After 2 flips it is certainly a layout feedback loop, so every further flip
+  // is forced to false (no scrollbar). The counter resets when row heights change.
+  // Only vertical scrollbar can oscillate because column widths are never 'auto'.
+  // https://github.com/mui/mui-x/issues/20539
+  const scrollYOscillation = React.useRef({
+    counter: 0,
+    heights: {
+      content: 0,
+      pinnedTop: 0,
+      pinnedBottom: 0
+    }
+  });
   const {
     rowHeight,
     headerHeight,
@@ -134,6 +149,7 @@ export function useGridDimensions(apiRef, props) {
       width: nonPinnedColumnsTotalWidth,
       height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
     };
+    const prevDimensions = apiRef.current.state.dimensions;
     let viewportOuterSize;
     let viewportInnerSize;
     let hasScrollX = false;
@@ -171,6 +187,36 @@ export function useGridDimensions(apiRef, props) {
           hasScrollY = content.height + scrollbarSize > container.height;
         }
       }
+
+      // Detect vertical scrollbar oscillation.
+      // Track consecutive hasScrollY flips with no row-height change.
+      // Once confirmed (≥ 2 flips), force hasScrollY off — the scrollbar is
+      // not genuinely needed, it is a layout feedback loop caused by stale
+      // rootSize or the horizontal scrollbar's height cascading.
+      {
+        const osc = scrollYOscillation.current;
+        const heightsChanged = rowsMeta.currentPageTotalHeight !== osc.heights.content || rowsMeta.pinnedTopRowsTotalHeight !== osc.heights.pinnedTop || rowsMeta.pinnedBottomRowsTotalHeight !== osc.heights.pinnedBottom;
+        if (heightsChanged) {
+          osc.counter = 0;
+          osc.heights = {
+            content: rowsMeta.currentPageTotalHeight,
+            pinnedTop: rowsMeta.pinnedTopRowsTotalHeight,
+            pinnedBottom: rowsMeta.pinnedBottomRowsTotalHeight
+          };
+        }
+        if (prevDimensions.isReady && hasScrollY !== prevDimensions.hasScrollY) {
+          if (!heightsChanged) {
+            osc.counter += 1;
+          }
+          if (osc.counter >= 2) {
+            hasScrollY = false;
+            // Recompute hasScrollX without the vertical scrollbar's width impact,
+            // otherwise the cascade (hasScrollY → narrower viewport → hasScrollX)
+            // keeps the horizontal scrollbar/filler alive and the root keeps resizing.
+            hasScrollX = hasScrollXIfNoYScrollBar;
+          }
+        }
+      }
       if (hasScrollY) {
         viewportInnerSize.width -= scrollbarSize;
       }
@@ -205,7 +251,6 @@ export function useGridDimensions(apiRef, props) {
       topContainerHeight,
       bottomContainerHeight
     };
-    const prevDimensions = apiRef.current.state.dimensions;
     if (isDeepEqual(prevDimensions, newDimensions)) {
       return;
     }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.29.12
+ * @mui/x-data-grid v7.29.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -67,6 +67,21 @@ export function useGridDimensions(apiRef, props) {
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
   const isFirstSizing = React.useRef(true);
+
+  // Vertical scrollbar oscillation detector.
+  // Counts consecutive hasScrollY flips that happen with no row-height change.
+  // After 2 flips it is certainly a layout feedback loop, so every further flip
+  // is forced to false (no scrollbar). The counter resets when row heights change.
+  // Only vertical scrollbar can oscillate because column widths are never 'auto'.
+  // https://github.com/mui/mui-x/issues/20539
+  const scrollYOscillation = React.useRef({
+    counter: 0,
+    heights: {
+      content: 0,
+      pinnedTop: 0,
+      pinnedBottom: 0
+    }
+  });
   const {
     rowHeight,
     headerHeight,
@@ -134,6 +149,7 @@ export function useGridDimensions(apiRef, props) {
       width: nonPinnedColumnsTotalWidth,
       height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
     };
+    const prevDimensions = apiRef.current.state.dimensions;
     let viewportOuterSize;
     let viewportInnerSize;
     let hasScrollX = false;
@@ -171,6 +187,36 @@ export function useGridDimensions(apiRef, props) {
           hasScrollY = content.height + scrollbarSize > container.height;
         }
       }
+
+      // Detect vertical scrollbar oscillation.
+      // Track consecutive hasScrollY flips with no row-height change.
+      // Once confirmed (≥ 2 flips), force hasScrollY off — the scrollbar is
+      // not genuinely needed, it is a layout feedback loop caused by stale
+      // rootSize or the horizontal scrollbar's height cascading.
+      {
+        const osc = scrollYOscillation.current;
+        const heightsChanged = rowsMeta.currentPageTotalHeight !== osc.heights.content || rowsMeta.pinnedTopRowsTotalHeight !== osc.heights.pinnedTop || rowsMeta.pinnedBottomRowsTotalHeight !== osc.heights.pinnedBottom;
+        if (heightsChanged) {
+          osc.counter = 0;
+          osc.heights = {
+            content: rowsMeta.currentPageTotalHeight,
+            pinnedTop: rowsMeta.pinnedTopRowsTotalHeight,
+            pinnedBottom: rowsMeta.pinnedBottomRowsTotalHeight
+          };
+        }
+        if (prevDimensions.isReady && hasScrollY !== prevDimensions.hasScrollY) {
+          if (!heightsChanged) {
+            osc.counter += 1;
+          }
+          if (osc.counter >= 2) {
+            hasScrollY = false;
+            // Recompute hasScrollX without the vertical scrollbar's width impact,
+            // otherwise the cascade (hasScrollY → narrower viewport → hasScrollX)
+            // keeps the horizontal scrollbar/filler alive and the root keeps resizing.
+            hasScrollX = hasScrollXIfNoYScrollBar;
+          }
+        }
+      }
       if (hasScrollY) {
         viewportInnerSize.width -= scrollbarSize;
       }
@@ -205,7 +251,6 @@ export function useGridDimensions(apiRef, props) {
       topContainerHeight,
       bottomContainerHeight
     };
-    const prevDimensions = apiRef.current.state.dimensions;
     if (isDeepEqual(prevDimensions, newDimensions)) {
       return;
     }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.29.12
+ * @mui/x-data-grid v7.29.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -77,6 +77,21 @@ function useGridDimensions(apiRef, props) {
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
   const columnsTotalWidth = (0, _utils2.useGridSelector)(apiRef, columnsTotalWidthSelector);
   const isFirstSizing = React.useRef(true);
+
+  // Vertical scrollbar oscillation detector.
+  // Counts consecutive hasScrollY flips that happen with no row-height change.
+  // After 2 flips it is certainly a layout feedback loop, so every further flip
+  // is forced to false (no scrollbar). The counter resets when row heights change.
+  // Only vertical scrollbar can oscillate because column widths are never 'auto'.
+  // https://github.com/mui/mui-x/issues/20539
+  const scrollYOscillation = React.useRef({
+    counter: 0,
+    heights: {
+      content: 0,
+      pinnedTop: 0,
+      pinnedBottom: 0
+    }
+  });
   const {
     rowHeight,
     headerHeight,
@@ -144,6 +159,7 @@ function useGridDimensions(apiRef, props) {
       width: nonPinnedColumnsTotalWidth,
       height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(rowsMeta.currentPageTotalHeight, 1)
     };
+    const prevDimensions = apiRef.current.state.dimensions;
     let viewportOuterSize;
     let viewportInnerSize;
     let hasScrollX = false;
@@ -181,6 +197,36 @@ function useGridDimensions(apiRef, props) {
           hasScrollY = content.height + scrollbarSize > container.height;
         }
       }
+
+      // Detect vertical scrollbar oscillation.
+      // Track consecutive hasScrollY flips with no row-height change.
+      // Once confirmed (≥ 2 flips), force hasScrollY off — the scrollbar is
+      // not genuinely needed, it is a layout feedback loop caused by stale
+      // rootSize or the horizontal scrollbar's height cascading.
+      {
+        const osc = scrollYOscillation.current;
+        const heightsChanged = rowsMeta.currentPageTotalHeight !== osc.heights.content || rowsMeta.pinnedTopRowsTotalHeight !== osc.heights.pinnedTop || rowsMeta.pinnedBottomRowsTotalHeight !== osc.heights.pinnedBottom;
+        if (heightsChanged) {
+          osc.counter = 0;
+          osc.heights = {
+            content: rowsMeta.currentPageTotalHeight,
+            pinnedTop: rowsMeta.pinnedTopRowsTotalHeight,
+            pinnedBottom: rowsMeta.pinnedBottomRowsTotalHeight
+          };
+        }
+        if (prevDimensions.isReady && hasScrollY !== prevDimensions.hasScrollY) {
+          if (!heightsChanged) {
+            osc.counter += 1;
+          }
+          if (osc.counter >= 2) {
+            hasScrollY = false;
+            // Recompute hasScrollX without the vertical scrollbar's width impact,
+            // otherwise the cascade (hasScrollY → narrower viewport → hasScrollX)
+            // keeps the horizontal scrollbar/filler alive and the root keeps resizing.
+            hasScrollX = hasScrollXIfNoYScrollBar;
+          }
+        }
+      }
       if (hasScrollY) {
         viewportInnerSize.width -= scrollbarSize;
       }
@@ -215,7 +261,6 @@ function useGridDimensions(apiRef, props) {
       topContainerHeight,
       bottomContainerHeight
     };
-    const prevDimensions = apiRef.current.state.dimensions;
     if ((0, _utils3.isDeepEqual)(prevDimensions, newDimensions)) {
       return;
     }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.29.12
+ * @mui/x-data-grid v7.29.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.29.12",
+  "version": "7.29.13",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",