From 9829fdebc1938a65dabfe0a92b85ace7f2c85939 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Mon, 21 Nov 2022 17:16:32 +1100
Subject: [PATCH] fix virtualization occasionally not detecting scroll

---
 src/components/Table/Table.tsx     | 17 ++++++++++++++---
 src/components/Table/TableBody.tsx |  6 ++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 2d412787..412e0535 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useRef, useState, useEffect, useCallback } from "react";
+import useStateRef from "react-usestateref";
 import { useAtom, useSetAtom } from "jotai";
 import { useThrottledCallback } from "use-debounce";
 import {
@@ -92,7 +93,11 @@ export default function Table({
 
   const updateColumn = useSetAtom(updateColumnAtom, tableScope);
 
-  const containerRef = useRef<HTMLDivElement>(null);
+  // Store a **state** and reference to the container element
+  // so the state can re-render `TableBody`, preventing virtualization
+  // not detecting scroll if the container element was initially `null`
+  const [containerEl, setContainerEl, containerRef] =
+    useStateRef<HTMLDivElement | null>(null);
   const gridRef = useRef<HTMLDivElement>(null);
 
   // Get column defs from table schema
@@ -205,11 +210,16 @@ export default function Table({
   // for large screen heights
   useEffect(() => {
     fetchMoreOnBottomReached(containerRef.current);
-  }, [fetchMoreOnBottomReached, tablePage, tableNextPage.loading]);
+  }, [
+    fetchMoreOnBottomReached,
+    tablePage,
+    tableNextPage.loading,
+    containerRef,
+  ]);
 
   return (
     <div
-      ref={containerRef}
+      ref={(el) => setContainerEl(el)}
       onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
       style={{ overflow: "auto", width: "100%", height: "100%" }}
     >
@@ -252,6 +262,7 @@ export default function Table({
           emptyState ?? <EmptyState sx={{ py: 8 }} />
         ) : (
           <TableBody
+            containerEl={containerEl}
             containerRef={containerRef}
             leafColumns={leafColumns}
             rows={rows}
diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx
index 45eef9a3..118dbece 100644
--- a/src/components/Table/TableBody.tsx
+++ b/src/components/Table/TableBody.tsx
@@ -24,6 +24,12 @@ import {
 } from "./Table";
 
 export interface ITableBodyProps {
+  /**
+   * Re-render this component when the container element changes, to fix a bug
+   * where virtualization doesn’t detect scrolls if `containerRef.current` was
+   * initially null
+   */
+  containerEl: HTMLDivElement | null;
   /** Used in `useVirtualization` */
   containerRef: React.RefObject<HTMLDivElement>;
   /** Used in `useVirtualization` */