[DataGrid] Fix scrollToIndexes offscreen column (#1964)

mui · Jul 1, 2021 · 84be88b · 84be88b
1 parent a316c76
commit 84be88b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 9 deletions.
diff --git a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualColumns.ts b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualColumns.ts
@@ -80,16 +80,22 @@ export const useGridVirtualColumns = (
       if (!containerPropsRef.current) {
         return false;
       }
-      const windowWidth = containerPropsRef.current.windowSizes.width;
-      const firstCol = getColumnFromScroll(lastScrollLeftRef.current);
-      const lastCol = getColumnFromScroll(lastScrollLeftRef.current + windowWidth);
+      const firstCol = getColumnFromScroll(lastScrollLeftRef.current); // First fully visible column
+      const firstColIndex = visibleColumns.findIndex((col) => col.field === firstCol?.field);
 
-      const firstColIndex = visibleColumns.findIndex((col) => col.field === firstCol?.field) + 1;
-      const lastColIndex = visibleColumns.findIndex((col) => col.field === lastCol?.field) - 1; // We ensure the last col is completely visible
+      const { positions } = columnsMeta;
+      const windowWidth = containerPropsRef.current.windowSizes.width;
+      const spaceBeforeFirstCol = positions[firstColIndex] - lastScrollLeftRef.current;
+      const availableWidth = windowWidth - spaceBeforeFirstCol;
+      let lastColIndex = firstColIndex;
+      while (lastColIndex < positions.length - 1 && positions[lastColIndex + 1] < availableWidth) {
+        lastColIndex += 1;
+      }
+      lastColIndex -= 1; // Last fully visible column
 
       return colIndex >= firstColIndex && colIndex <= lastColIndex;
     },
-    [getColumnFromScroll, visibleColumns],
+    [columnsMeta, getColumnFromScroll, visibleColumns],
   );
 
   const updateRenderedCols: UpdateRenderedColsFnType = React.useCallback(

diff --git a/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx b/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx
@@ -277,13 +277,18 @@ describe('<XGrid /> - Rows', () => {
 
     let apiRef: GridApiRef;
     const TestCaseVirtualization = (
-      props: Partial<XGridProps> & { nbRows?: number; nbCols?: number; height?: number },
+      props: Partial<XGridProps> & {
+        nbRows?: number;
+        nbCols?: number;
+        width?: number;
+        height?: number;
+      },
     ) => {
       apiRef = useGridApiRef();
       const data = useData(props.nbRows || 100, props.nbCols || 10);
 
       return (
-        <div style={{ width: 300, height: props.height || 300 }}>
+        <div style={{ width: props.width || 300, height: props.height || 300 }}>
           <XGrid apiRef={apiRef} columns={data.columns} rows={data.rows} {...props} />
         </div>
       );
@@ -449,7 +454,7 @@ describe('<XGrid /> - Rows', () => {
     });
 
     describe('scrollToIndexes', () => {
-      it('should scroll correctly when the given index is partially visible at the bottom', () => {
+      it('should scroll correctly when the given rowIndex is partially visible at the bottom', () => {
         const headerHeight = 40;
         const rowHeight = 50;
         const offset = 10;
@@ -491,6 +496,24 @@ describe('<XGrid /> - Rows', () => {
         apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 0 });
         expect(gridWindow.scrollTop).to.equal(0);
       });
+
+      it('should scroll correctly when the given colIndex is partially visible at the right', () => {
+        const width = 300;
+        const border = 1;
+        const columnWidth = 120;
+        const rows = [{ id: 0, firstName: 'John', lastName: 'Doe', age: 11 }];
+        const columns = [
+          { field: 'id', width: columnWidth },
+          { field: 'firstName', width: columnWidth },
+          { field: 'lastName', width: columnWidth },
+          { field: 'age', width: columnWidth },
+        ];
+        render(<TestCaseVirtualization width={width + border * 2} rows={rows} columns={columns} />);
+        const gridWindow = document.querySelector('.MuiDataGrid-window')!;
+        expect(gridWindow.scrollLeft).to.equal(0);
+        apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 2 });
+        expect(gridWindow.scrollLeft).to.equal(columnWidth * 3 - width);
+      });
     });
   });
 });