test: lock overflow branch and scrollTop guard

- add test for overflow case where container is shorter
than full content
- new spec file covering the guard
that prevents phantom page loads on content-resize

Author: yordan-st

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -10,6 +10,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We added a "Custom row key" property in the Advanced section to provide stable row identifiers when using view entities, preventing scroll position loss during data refresh.
 
+### Fixed
+
+- We fixed an issue where the vertical scrollbar disappeared after hiding a wide column while virtual scrolling was enabled.
+- We fixed an issue where only the first page loaded when the grid had enough columns to require horizontal scrolling.
+
 ## [3.9.0] - 2026-03-23
 
 ### Changed

packages/pluggableWidgets/datagrid-web/src/model/hooks/__tests__/useInfiniteControl.spec.tsx

@@ -0,0 +1,98 @@
+import { renderHook, act } from "@testing-library/react";
+import { createRef, UIEvent } from "react";
+
+jest.mock("@mendix/widget-plugin-hooks/useOnScreen", () => ({
+    useOnScreen: () => true
+}));
+
+const mockBumpPage = jest.fn();
+const mockLockGridContainerHeight = jest.fn();
+const mockGridContainerRef = createRef<HTMLDivElement>();
+
+jest.mock("../injection-hooks", () => ({
+    useGridSizeStore: () => ({
+        hasVirtualScrolling: true,
+        gridContainerRef: mockGridContainerRef,
+        bumpPage: mockBumpPage,
+        lockGridContainerHeight: mockLockGridContainerHeight
+    })
+}));
+
+import { useInfiniteControl } from "../useInfiniteControl";
+import { VIRTUAL_SCROLLING_OFFSET } from "../../stores/GridSize.store";
+
+function makeScrollEvent(overrides: {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+    scrollLeft?: number;
+}): UIEvent<HTMLDivElement> {
+    const { scrollTop, scrollHeight, clientHeight, scrollLeft = 0 } = overrides;
+    return {
+        target: { scrollTop, scrollHeight, clientHeight, scrollLeft }
+    } as unknown as UIEvent<HTMLDivElement>;
+}
+
+describe("useInfiniteControl — trackTableScrolling", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        mockBumpPage.mockClear();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    it("does not call bumpPage when scrollTop is 0, even if scroll position satisfies bottom condition", () => {
+        const { result } = renderHook(() => useInfiniteControl());
+        const [trackTableScrolling] = result.current;
+
+        // scrollTop === 0 → guard blocks bumpPage regardless of height math
+        const e = makeScrollEvent({
+            scrollTop: 0,
+            scrollHeight: 500,
+            clientHeight: 500
+        });
+
+        act(() => {
+            trackTableScrolling!(e);
+        });
+
+        expect(mockBumpPage).not.toHaveBeenCalled();
+    });
+
+    it("calls bumpPage when scrollTop > 0 and scroll position reaches the bottom", () => {
+        const { result } = renderHook(() => useInfiniteControl());
+        const [trackTableScrolling] = result.current;
+
+        // scrollTop > 0 and Math.floor(scrollHeight - OFFSET - scrollTop) <= clientHeight + 2
+        const scrollHeight = 500;
+        const clientHeight = 400;
+        const scrollTop = scrollHeight - VIRTUAL_SCROLLING_OFFSET - clientHeight; // exactly at bottom
+
+        const e = makeScrollEvent({ scrollTop, scrollHeight, clientHeight });
+
+        act(() => {
+            trackTableScrolling!(e);
+        });
+
+        expect(mockBumpPage).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not call bumpPage when scrolled but not yet at the bottom", () => {
+        const { result } = renderHook(() => useInfiniteControl());
+        const [trackTableScrolling] = result.current;
+
+        const e = makeScrollEvent({
+            scrollTop: 10,
+            scrollHeight: 500,
+            clientHeight: 100
+        });
+
+        act(() => {
+            trackTableScrolling!(e);
+        });
+
+        expect(mockBumpPage).not.toHaveBeenCalled();
+    });
+});

packages/pluggableWidgets/datagrid-web/src/model/stores/__tests__/GridSize.store.spec.ts

@@ -173,6 +173,16 @@ describe("GridSizeStore.lockGridContainerHeight()", () => {
         expect(store.gridContainerHeight).not.toBe(heightWithPageSize3);
     });
 
+    it("does not subtract offset when container height is smaller than full content height (overflow case)", () => {
+        const { store } = buildStore({ pageSize: 3, columnCount: 2 });
+        // fullHeight = 3×40 + 50 = 170px; container is only 100px → overflows
+        setupRefs(store, { rowHeight: 40, rowCount: 3, headerHeight: 50, containerClientHeight: 100 });
+
+        store.lockGridContainerHeight();
+
+        expect(store.gridContainerHeight).toBe(170); // no offset subtracted
+    });
+
     it("clears and recomputes height when visible column count changes", () => {
         const { store, columnCountBox } = buildStore({ pageSize: 3, columnCount: 2 });
         setupRefs(store, { rowHeight: 40, rowCount: 3, headerHeight: 50, containerClientHeight: 1000 });