fix(scrollToIndex): dynamic height support

Author: tannerlinsley

examples/dynamic/src/index.js

@@ -156,11 +156,16 @@ function GridVirtualizerDynamic({ rows, columns }) {
 
   const [show, setShow] = React.useState(true);
 
+  const halfWay = Math.floor(rows.length / 2);
+
   return (
     <>
       <button onClick={() => setShow(old => !old)}>Toggle</button>
-      <button onClick={() => rowVirtualizer.scrollToIndex(5000)}>
-        Scroll to 5000
+      <button onClick={() => rowVirtualizer.scrollToIndex(halfWay)}>
+        Scroll to index {halfWay}
+      </button>
+      <button onClick={() => rowVirtualizer.scrollToIndex(rows.length)}>
+        Scroll to index {rows.length - 1}
       </button>
       {show ? (
         <div

src/index.js

@@ -108,8 +108,6 @@ export function useVirtual({
   }
 
   const virtualItems = React.useMemo(() => {
-    const { scrollOffset } = latestRef.current
-
     const virtualItems = []
 
     for (let i = startIndex; i <= endIndex; i++) {
@@ -118,13 +116,16 @@ export function useVirtual({
       const item = {
         ...measurement,
         measureRef: el => {
+          const { scrollOffset } = latestRef.current
+
           if (el) {
             const { [sizeKey]: measuredSize } = el.getBoundingClientRect()
 
             if (measuredSize !== item.size) {
               if (item.start < scrollOffset) {
                 defaultScrollToFn(scrollOffset + (measuredSize - item.size))
               }
+
               setMeasuredCache(old => ({
                 ...old,
                 [i]: measuredSize,
@@ -155,11 +156,8 @@ export function useVirtual({
         outerSize,
         scrollOffset,
         scrollOffsetPlusOuterSize,
-        totalSize,
       } = latestRef.current
 
-      offset = Math.max(0, Math.min(offset, totalSize - outerSize))
-
       if (align === 'auto') {
         if (offset <= scrollOffset) {
           align = 'start'
@@ -181,19 +179,15 @@ export function useVirtual({
     [scrollToFn]
   )
 
-  const scrollToIndex = React.useCallback(
+  const tryScrollToIndex = React.useCallback(
     (index, { align = 'auto', ...rest } = {}) => {
       const {
         measurements,
         scrollOffset,
         scrollOffsetPlusOuterSize,
       } = latestRef.current
 
-      const measurement = measurements[index]
-
-      if (!measurement) {
-        return
-      }
+      const measurement = measurements[Math.max(0, Math.min(index, size - 1))]
 
       if (align === 'auto') {
         if (measurement.end >= scrollOffsetPlusOuterSize) {
@@ -211,9 +205,25 @@ export function useVirtual({
           : align === 'end'
           ? measurement.end
           : measurement.start
+
       scrollToOffset(offset, { align, ...rest })
     },
-    [scrollToOffset]
+    [scrollToOffset, size]
+  )
+
+  const scrollToIndex = React.useCallback(
+    (...args) => {
+      // We do a double request here because of
+      // dynamic sizes which can cause offset shift
+      // and end up in the wrong spot. Unfortunately,
+      // we can't know about those dynamic sizes until
+      // we try and render them. So double down!
+      tryScrollToIndex(...args)
+      requestAnimationFrame(() => {
+        tryScrollToIndex(...args)
+      })
+    },
+    [tryScrollToIndex]
   )
 
   return {