[table] fix: vertical scroll bug when ghostCells enabled (#5113)

palantir · Feb 3, 2022 · 7460d10 · 7460d10
1 parent 57b53e5
commit 7460d10
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/packages/table/src/table.tsx b/packages/table/src/table.tsx
@@ -763,7 +763,7 @@ export class Table extends AbstractComponent2<TableProps, TableState, TableSnaps
 
         const isViewportUnscrolledVertically = viewportRect != null && viewportRect.top === 0;
         const areRowHeadersLoading = hasLoadingOption(this.props.loadingOptions, TableLoadingOption.ROW_HEADERS);
-        const areGhostRowsVisible = enableGhostCells && this.grid.isGhostIndex(rowIndices.rowIndexEnd, 0);
+        const areGhostRowsVisible = enableGhostCells && this.grid.isGhostIndex(rowIndices.rowIndexEnd - 1, 0);
 
         return areGhostRowsVisible && (isViewportUnscrolledVertically || areRowHeadersLoading);
     }

diff --git a/packages/table/src/table2.tsx b/packages/table/src/table2.tsx
@@ -608,7 +608,7 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
 
         const isViewportUnscrolledVertically = viewportRect != null && viewportRect.top === 0;
         const areRowHeadersLoading = hasLoadingOption(this.props.loadingOptions, TableLoadingOption.ROW_HEADERS);
-        const areGhostRowsVisible = enableGhostCells && this.grid.isGhostIndex(rowIndices.rowIndexEnd, 0);
+        const areGhostRowsVisible = enableGhostCells && this.grid.isGhostIndex(rowIndices.rowIndexEnd - 1, 0);
 
         return areGhostRowsVisible && (isViewportUnscrolledVertically || areRowHeadersLoading);
     }

diff --git a/packages/table/test/tableTests.tsx b/packages/table/test/tableTests.tsx
@@ -215,6 +215,41 @@ describe("<Table>", function (this) {
         }
     });
 
+    describe("Vertically scrolling", () => {
+        const CONTAINER_WIDTH = 300;
+        const CONTAINER_HEIGHT = 320;
+
+        function runTest(enableGhostCells: boolean) {
+            it(`isn't disabled when there is half a row left to scroll to and enableGhostCells is set to ${enableGhostCells}`, () => {
+                const ROW_HEIGHT = 30;
+                const { containerElement, table } = mountTable({ defaultRowHeight: ROW_HEIGHT, enableGhostCells });
+                const tableContainer = table.find(`.${Classes.TABLE_CONTAINER}`);
+                // There should be 10px left of scrolling. Height is 320, rows take up 300, and headerRow takes up 30
+                expect(tableContainer.hasClass(Classes.TABLE_NO_VERTICAL_SCROLL)).to.be.false;
+
+                // clean up created div
+                document.body.removeChild(containerElement);
+            });
+        }
+        runTest(true);
+        runTest(false);
+
+        function mountTable(tableProps: Partial<TableProps> = {}) {
+            const containerElement = document.createElement("div");
+            containerElement.style.width = `${CONTAINER_WIDTH}px`;
+            containerElement.style.height = `${CONTAINER_HEIGHT}px`;
+            document.body.appendChild(containerElement);
+
+            const table = mount(
+                <Table numRows={10} {...tableProps}>
+                    <Column cellRenderer={renderDummyCell} />
+                </Table>,
+                { attachTo: containerElement },
+            );
+            return { containerElement, table };
+        }
+    });
+
     describe("Instance methods", () => {
         describe("resizeRowsByApproximateHeight", () => {
             const STR_LENGTH_SHORT = 10;