Fix jump to character for Collections and Discover

Fix for a regression introduced in react-virtualized 9.21.2 when WindowScroller is used with Grids

frontend/src/Collection/Overview/CollectionOverviews.js

@@ -92,15 +92,14 @@ class CollectionOverviews extends Component {
 
     if (this._grid && scrollTop !== 0 && !scrollRestored) {
       this.setState({ scrollRestored: true });
-      this._grid.scrollToPosition({ scrollTop });
+      this._gridScrollToPosition({ scrollTop });
     }
 
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
       const index = getIndexOfFirstCharacter(items, jumpToCharacter);
 
       if (this._grid && index != null) {
-
-        this._grid.scrollToCell({
+        this._gridScrollToCell({
           rowIndex: index,
           columnIndex: 0
         });
@@ -186,6 +185,19 @@ class CollectionOverviews extends Component {
     );
   };
 
+  _gridScrollToCell = ({ rowIndex = 0, columnIndex = 0 }) => {
+    const scrollOffset = this._grid.getOffsetForCell({
+      rowIndex,
+      columnIndex
+    });
+
+    this._gridScrollToPosition(scrollOffset);
+  };
+
+  _gridScrollToPosition = ({ scrollTop = 0, scrollLeft = 0 }) => {
+    this.props.scroller?.scrollTo({ top: scrollTop, left: scrollLeft });
+  };
+
   //
   // Listeners
 

frontend/src/Components/Table/VirtualTable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
 import { Grid, GridCellProps, WindowScroller } from 'react-virtualized';
 import ModelBase from 'App/ModelBase';
 import Scroller from 'Components/Scroller/Scroller';
@@ -79,6 +79,39 @@ function VirtualTable<T extends ModelBase>({
     position: undefined,
   };
 
+  const handleScrollToPosition = useCallback(
+    ({
+      scrollTop = 0,
+      scrollLeft = 0,
+    }: {
+      scrollTop: number;
+      scrollLeft: number;
+    }) => {
+      scroller?.scrollTo({ top: scrollTop, left: scrollLeft });
+    },
+    [scroller]
+  );
+
+  const handleScrollToCell = useCallback(
+    ({
+      rowIndex = 0,
+      columnIndex = 0,
+    }: {
+      rowIndex: number;
+      columnIndex: number;
+    }) => {
+      if (gridRef.current) {
+        const scrollOffset = gridRef.current.getOffsetForCell({
+          rowIndex,
+          columnIndex,
+        });
+
+        handleScrollToPosition(scrollOffset);
+      }
+    },
+    [gridRef, handleScrollToPosition]
+  );
+
   useEffect(() => {
     if (gridRef.current && width > 0) {
       gridRef.current.recomputeGridSize();
@@ -97,10 +130,10 @@ function VirtualTable<T extends ModelBase>({
 
   useEffect(() => {
     if (gridRef.current && scrollTop && !scrollRestored.current) {
-      gridRef.current.scrollToPosition({ scrollLeft: 0, scrollTop });
+      handleScrollToPosition({ scrollLeft: 0, scrollTop });
       scrollRestored.current = true;
     }
-  }, [scrollTop]);
+  }, [scrollTop, handleScrollToPosition]);
 
   useEffect(() => {
     if (
@@ -108,12 +141,12 @@ function VirtualTable<T extends ModelBase>({
       scrollIndex != null &&
       scrollIndex !== previousScrollIndex
     ) {
-      gridRef.current.scrollToCell({
+      handleScrollToCell({
         rowIndex: scrollIndex,
         columnIndex: 0,
       });
     }
-  }, [scrollIndex, previousScrollIndex]);
+  }, [scrollIndex, previousScrollIndex, handleScrollToCell]);
 
   return (
     <WindowScroller scrollElement={isSmallScreen ? undefined : scroller}>

frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviews.js

@@ -95,8 +95,7 @@ class DiscoverMovieOverviews extends Component {
       const index = getIndexOfFirstCharacter(items, jumpToCharacter);
 
       if (this._grid && index != null) {
-
-        this._grid.scrollToCell({
+        this._gridScrollToCell({
           rowIndex: index,
           columnIndex: 0
         });
@@ -182,6 +181,19 @@ class DiscoverMovieOverviews extends Component {
     );
   };
 
+  _gridScrollToCell = ({ rowIndex = 0, columnIndex = 0 }) => {
+    const scrollOffset = this._grid.getOffsetForCell({
+      rowIndex,
+      columnIndex
+    });
+
+    this._gridScrollToPosition(scrollOffset);
+  };
+
+  _gridScrollToPosition = ({ scrollTop = 0, scrollLeft = 0 }) => {
+    this.props.scroller?.scrollTo({ top: scrollTop, left: scrollLeft });
+  };
+
   //
   // Listeners
 

frontend/src/DiscoverMovie/Posters/DiscoverMoviePosters.js

@@ -170,7 +170,7 @@ class DiscoverMoviePosters extends Component {
       if (this._grid && index != null) {
         const row = Math.floor(index / columnCount);
 
-        this._grid.scrollToCell({
+        this._gridScrollToCell({
           rowIndex: row,
           columnIndex: 0
         });
@@ -271,6 +271,19 @@ class DiscoverMoviePosters extends Component {
     );
   };
 
+  _gridScrollToCell = ({ rowIndex = 0, columnIndex = 0 }) => {
+    const scrollOffset = this._grid.getOffsetForCell({
+      rowIndex,
+      columnIndex
+    });
+
+    this._gridScrollToPosition(scrollOffset);
+  };
+
+  _gridScrollToPosition = ({ scrollTop = 0, scrollLeft = 0 }) => {
+    this.props.scroller?.scrollTo({ top: scrollTop, left: scrollLeft });
+  };
+
   //
   // Listeners