[data grid] autoHeight. the page should scroll if the current row is outside the viewport

[mdbm-code]

I am using the autoHeight prop on my DataGrid.
"react": "^18.2.0",
"@mui/x-data-grid": "^5.17.22",

Users use arrow keys to navigate through rows. However, the site page will not scroll if the user has moved to a row that is below the viewport. So, they have to move their hand to the mouse in order to scroll the page with the mouse wheel and then return their hand to the keyboard and continue working.

How to make a website page scroll if the user navigates to a row that is below the viewport ?

You can replicate this issue on this page https://mui.com/x/react-data-grid/layout/#auto-height
Press the Add a Row button until the table is larger than your screen and then click on the row and start moving down the table with the arrow keys

[m4theushw]

We use element.focus({ preventScroll: true }) to fix a bug that makes the rows to jump when navigating to a cell. It turns out that this option is not needed when autoHeight is in use, so we could disable it in this condition with:

diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
index bca8187b6..31a51d6ec 100644
--- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
+++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
@@ -195,15 +195,15 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
       const focusableElement = cellRef.current!.querySelector<HTMLElement>('[tabindex="0"]');
       const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
 
-      if (doesSupportPreventScroll()) {
-        elementToFocus.focus({ preventScroll: true });
+      if (doesSupportPreventScroll() || rootProps.autoHeight) {
+        elementToFocus.focus({ preventScroll: !rootProps.autoHeight });
       } else {
         const scrollPosition = apiRef.current.getScrollPosition();
         elementToFocus.focus();
         apiRef.current.scroll(scrollPosition);
       }
     }
-  }, [hasFocus, cellMode, apiRef]);
+  }, [hasFocus, cellMode, apiRef, rootProps.autoHeight]);
 
   let handleFocus: any = other.onFocus;

Do you want to submit a PR with the diff above?

[yaredtsy]

hey @m4theushw
some have reported this issue before and I have submitted PR at #6838 .

but I have taken a different approach to solve this issue.

mui-x/packages/grid/x-data-grid/src/components/cell/GridCell.tsx

Lines 206 to 224 in 9f03ef1

	let handleFocus: any = React.useCallback(
	(event: React.FocusEvent<HTMLDivElement>) => {
	const rect = cellRef.current!.getBoundingClientRect();
	const isInViewPort =
	rect.top >= 0 &&
	rect.left >= 0 &&
	rect.bottom <= (window.innerHeight || cellRef.current!.clientHeight) &&
	rect.right <= (window.innerWidth || cellRef.current!.clientWidth);
	if (!isInViewPort) {
	cellRef.current!.scrollIntoView({ block: 'nearest' });
	}
	if (other.onFocus) {
	other.onFocus(event);
	}
	},
	[other],
	);

[romgrk]

@yaredtsy There is less complexity in the solution proposed by @m4theushw, is there any reason why you think the approach you posted is better?

[yaredtsy]

hey @romgrk the solution proposed by @m4theushw will only work if virtualization is disabled.b/c if you are using autoHeight virtualization will be disabled.

[yaredtsy]

I have created another PR at #7357. That solves the core issue if it's approved element.focus() can be used without preventing the scroll.

[JerryWu1234]

was this problem solved?