fix: scrollToItem causes empty items when working with dynamic size

wellyshen · Jun 3, 2021 · 79ae7bd · 79ae7bd
1 parent dbf34fa
commit 79ae7bd
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/.changeset/rich-bats-sin.md b/.changeset/rich-bats-sin.md
@@ -0,0 +1,5 @@
+---
+"react-cool-virtual": patch
+---
+
+fix: `scrollToItem` causes empty items when working with dynamic size
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@
 - 🗄️ Supports [server-side rendering (SSR)](#server-side-rendering-ssr) for a fast [FP + FCP](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-rendering) and better [SEO](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-rendering).
 - 📜 Supports [TypeScript](#working-in-typescript) type definition.
 - 🎛 Super flexible [API](#api) design, built with DX in mind.
-- 🦔 Tiny size ([~ 2.8kB gzipped](https://bundlephobia.com/result?p=react-cool-virtual)). No external dependencies, aside for the `react`.
+- 🦔 Tiny size ([~ 2.7kB gzipped](https://bundlephobia.com/result?p=react-cool-virtual)). No external dependencies, aside for the `react`.
 
 ## Why?
 
@@ -916,7 +916,7 @@ The virtualized items for rendering rows/columns. Each item is an `Object` that
 | index       | number               | The index of the item.                                                                                          |
 | size        | number               | The fixed/variable/measured size of the item.                                                                   |
 | width       | number               | The current content width of the outer element. It's useful for a [RWD row/column](#responsive-web-design-rwd). |
-| start       | number               | The starting position of the item. We might only need this when [working with grids](#layout-items).           |
+| start       | number               | The starting position of the item. We might only need this when [working with grids](#layout-items).            |
 | isScrolling | boolean \| undefined | An indicator to show a placeholder or [optimize performance](#use-isscrolling-indicator) for the item.          |
 | measureRef  | Function             | It's used to measure the [dynamic size](#dynamic-size) or [real-time resize](#real-time-resize) of the item.    |
 

diff --git a/src/useVirtual.ts b/src/useVirtual.ts
@@ -70,7 +70,6 @@ export default <
     getInitItems(itemSize, ssrItemCount)
   );
   const hasDynamicSizeRef = useRef(false);
-  const isScrollToItemRef = useRef(false);
   const hasLoadMoreOnMountRef = useRef(false);
   const rosRef = useRef<Map<Element, ResizeObserver>>(new Map());
   const scrollOffsetRef = useRef(0);
@@ -126,7 +125,7 @@ export default <
       const { current: msData } = msDataRef;
       let vStart = 0;
 
-      if (hasDynamicSizeRef.current && !isScrollToItemRef.current) {
+      if (hasDynamicSizeRef.current) {
         while (
           vStart < msData.length &&
           msData[vStart].start < (msData[vStart + 1]?.start || 0) &&
@@ -219,8 +218,6 @@ export default <
 
       if (!isNumber(index)) return;
 
-      isScrollToItemRef.current = true;
-
       if (hasDynamicSizeRef.current) measureItems();
 
       const ms = msDataRef.current[Math.max(0, Math.min(index, itemCount - 1))];
@@ -243,9 +240,9 @@ export default <
           scrollOffset = endPos;
           break;
         default:
-          if (scrollOffset >= start) {
+          if (scrollOffset > start) {
             scrollOffset = start;
-          } else if (scrollOffset + outerSize <= end) {
+          } else if (scrollOffset + outerSize < end) {
             scrollOffset = endPos;
           }
       }
@@ -276,7 +273,6 @@ export default <
   );
 
   const [resetOthers, cancelResetOthers] = useDebounce(() => {
-    isScrollToItemRef.current = false;
     userScrollRef.current = true;
 
     const len = rosRef.current.size - items.length;