bug(data frame): Fix scrolling in fillable cards (posit-dev#1550)

Co-authored-by: Barret Schloerke <barret@posit.co>

Author: jcheng5

CHANGELOG.md

@@ -61,7 +61,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Fixed #1440: When a Shiny Express app with a `www/` subdirectory was deployed to shinyapps.io or a Connect server, it would not start correctly. (#1442)
 
-* Fixed #1498: Update table related TypeScript dependencies to their latest versions. This fixed an issue where the Row Virtualizer would scroll to the end when hidden. This would cause the DOM to update numerous times, locking up the browser tab for multiple seconds. #1524
+* Fixed #1498: Update table related TypeScript dependencies to their latest versions. This fixed an issue where the Row Virtualizer would scroll to the end when hidden. This would cause the DOM to update numerous times, locking up the browser tab for multiple seconds. (#1524, #1550)
 
 * The return type for the data frame patch function now returns a list of `render.CellPatch` objects (which support `htmltools.TagNode` for the `value` attribute). These values will be set inside the data frame's `.data_view()` result. This also means that `.cell_patches()` will be a list of `render.CellPatch` objects.  (#1526)
 

js/data-frame/index.tsx

@@ -648,13 +648,29 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
 
   const headerRowCount = table.getHeaderGroups().length;
 
-  // Assume we're scrolling until proven otherwise
-  let scrollingClass = tableData.length > 0 ? "scrolling" : "";
-  const scrollHeight = containerRef.current?.scrollHeight;
-  const clientHeight = containerRef.current?.clientHeight;
-  if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
-    scrollingClass = "";
-  }
+  // Maintain the .scrolling class: present if the amount of data in the table causes
+  // vertical overflow, absent if not.
+  useLayoutEffect(() => {
+    // If no data, we're definitely not scrolling. Otherwise, we need to test.
+    let scrolling = tableData.length > 0;
+    if (scrolling) {
+      // We need to add .scrolling before comparing scrollHeight/clientHeight. If not,
+      // then if there's already a scrollworthy amount of data, we might get stuck in
+      // non-scrolling state because the clientHeight is expanding within a fixed
+      // container. (See https://github.com/posit-dev/py-shiny/issues/1549)
+      containerRef.current?.classList.add("scrolling");
+      const scrollHeight = containerRef.current?.scrollHeight;
+      const clientHeight = containerRef.current?.clientHeight;
+      if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
+        scrolling = false;
+      }
+    }
+    containerRef.current?.classList.toggle("scrolling", scrolling);
+  }, [
+    tableData.length,
+    containerRef.current?.scrollHeight,
+    containerRef.current?.clientHeight,
+  ]);
 
   const makeHeaderKeyDown =
     (column: Column<unknown[], unknown>) => (event: React.KeyboardEvent) => {
@@ -665,7 +681,7 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = ({
 
   const measureEl = useVirtualizerMeasureWorkaround(rowVirtualizer);
 
-  let className = `shiny-data-grid ${containerClass} ${scrollingClass}`;
+  let className = `shiny-data-grid ${containerClass}`;
   if (fill) {
     className += " html-fill-item";
   }