[DataGrid] Prevent column header scroll (mui#4280)

alexfauquette · Aug 26, 2022 · b7d9c00 · b7d9c00
1 parent 4003463
commit b7d9c00
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnHeaders.DataGridPro.test.tsx
@@ -32,6 +32,26 @@ describe('<DataGridPro /> - Column Headers', () => {
     ],
   };
 
+  it('should not scroll the column headers when a column is focused', function test() {
+    if (isJSDOM) {
+      this.skip(); // JSDOM version of .focus() doesn't scroll
+    }
+    render(
+      <div style={{ width: 102, height: 500 }}>
+        <DataGridPro
+          {...baselineProps}
+          columns={[{ field: 'brand' }, { field: 'foundationYear' }]}
+        />
+      </div>,
+    );
+    const columnHeaders = document.querySelector('.MuiDataGrid-columnHeaders')!;
+    expect(columnHeaders.scrollLeft).to.equal(0);
+    const columnCell = getColumnHeaderCell(0);
+    columnCell.focus();
+    fireEvent.keyDown(columnCell, { key: 'End' });
+    expect(columnHeaders.scrollLeft).to.equal(0);
+  });
+
   describe('GridColumnHeaderMenu', () => {
     it('should close the menu when the window is scrolled', () => {
       render(

diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -207,13 +207,11 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     const columnMenuState = apiRef.current.state.columnMenu;
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current!.querySelector<HTMLElement>('[tabindex="0"]');
-      if (focusableElement) {
-        focusableElement!.focus();
-      } else {
-        headerCellRef.current!.focus();
-      }
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus?.focus();
+      apiRef.current.columnHeadersContainerElementRef!.current!.scrollLeft = 0;
     }
-  });
+  }, [apiRef, hasFocus]);
 
   const headerClassName =
     typeof column.headerClassName === 'function'

diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx
@@ -44,13 +44,11 @@ const GridColumnHeadersRoot = styled('div', {
   };
 });
 
-interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
-  innerRef?: React.Ref<HTMLDivElement>;
-}
+interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 export const GridColumnHeaders = React.forwardRef<HTMLDivElement, GridColumnHeadersProps>(
   function GridColumnHeaders(props, ref) {
-    const { innerRef, className, ...other } = props;
+    const { className, ...other } = props;
     const rootProps = useGridRootProps();
 
     const ownerState = { classes: rootProps.classes };

diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -171,7 +171,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
 
       columns.push(
         <GridColumnHeaderItem
-          key={i}
+          key={column.field}
           {...sortColumnLookup[column.field]}
           columnMenuOpen={open}
           filterItemsCounter={