fix(): no jump with float item height and itmi

Fixes #446

itmi = initialTopMostItemIndex prop

e2e/auto-prepend-items.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
+import * as React from 'react'
 import { Virtuoso } from '../src/'
 import faker from 'faker'
 

e2e/test-case-446.test.ts

@@ -0,0 +1,16 @@
+describe('list with a long last item', () => {
+  beforeEach(async () => {
+    await page.goto('http://localhost:1234/test-case-446')
+    await page.waitForSelector('#test-root')
+    await page.waitForTimeout(300)
+  })
+
+  // the float height was causing a load of item 9
+  it('starts from item with index 10', async () => {
+    const firstItemIndex = await page.evaluate(() => {
+      const listContainer = document.querySelector('[data-test-id=virtuoso-item-list]')!
+      return (listContainer as HTMLElement).firstElementChild!.getAttribute('data-item-index')
+    })
+    expect(firstItemIndex).toBe('10')
+  })
+})

e2e/test-case-446.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { Virtuoso } from '../src'
+
+const itemContent = (index: number, note: { content: string }) => (
+  <div style={{ height: index % 2 ? 70.3 : 30.6, background: 'white' }}>{note.content}</div>
+)
+// globalThis['VIRTUOSO_LOG_LEVEL'] = 0
+
+const notes: Array<ReturnType<typeof note>> = []
+function note(index: number) {
+  return {
+    index: index + 1,
+    content: `Note ${index}`,
+  }
+}
+
+export const getNote = (index: number) => {
+  if (!notes[index]) {
+    notes[index] = note(index)
+  }
+
+  return notes[index]
+}
+
+const generateNotes = (length: number, startIndex = 0) => {
+  return Array.from({ length }).map((_, i) => getNote(i + startIndex))
+}
+
+const START_INDEX = 10000
+const INITIAL_ITEM_COUNT = 20
+
+export default function App() {
+  const [topMostItemIndex, setTopMostItemIndex] = useState(10)
+  const [notes] = useState(() => generateNotes(INITIAL_ITEM_COUNT, START_INDEX))
+
+  return (
+    <div>
+      <button onClick={() => setTopMostItemIndex(() => 3)}>Topmost index = 3</button>
+      <button onClick={() => setTopMostItemIndex(() => 7)}>Topmost index = 7</button>
+      <Virtuoso data={notes} itemContent={itemContent} initialTopMostItemIndex={topMostItemIndex} style={{ height: 300 }} />
+    </div>
+  )
+}

src/List.tsx

@@ -205,7 +205,7 @@ export const Items = React.memo(function VirtuosoItems({ showTopList = false }:
 
   return createElement(
     ListComponent,
-    { ref, style: containerStyle },
+    { ref, style: containerStyle, 'data-test-id': showTopList ? 'virtuoso-top-item-list' : 'virtuoso-item-list' },
     (showTopList ? listState.topItems : listState.items).map((item) => {
       const index = item.originalIndex!
       const key = computeItemKey(index + firstItemIndex, item.data)

src/interfaces.ts

@@ -34,7 +34,7 @@ export type TopItemListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'chi
 /**
  * Passed to the Components.List custom component
  */
-export type ListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'>
+export type ListProps = Pick<ComponentPropsWithRef<'div'>, 'style' | 'children' | 'ref'> & { 'data-test-id': string }
 
 /**
  * Passed to the Components.List custom component

src/upwardScrollFixSystem.ts

@@ -4,6 +4,7 @@ import { listStateSystem } from './listStateSystem'
 import { sizeSystem } from './sizeSystem'
 import { stateFlagsSystem } from './stateFlagsSystem'
 import { ListItem } from './interfaces'
+import { loggerSystem, LogLevel } from './loggerSystem'
 
 /**
  * Fixes upward scrolling by calculating and compensation from changed item heights, using scrollBy.
@@ -14,6 +15,7 @@ export const upwardScrollFixSystem = u.system(
     { isScrolling },
     { listState },
     { beforeUnshiftWith, sizes },
+    { log },
   ]) => {
     const deviationOffset = u.streamFromEmitter(
       u.pipe(
@@ -53,11 +55,12 @@ export const upwardScrollFixSystem = u.system(
           [0, []] as [number, ListItem<any>[]]
         ),
         u.filter(([amount]) => amount !== 0),
-        u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress),
+        u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress, log),
         u.filter(([, scrollTop, scrollDirection, scrollingInProgress]) => {
           return !scrollingInProgress && scrollTop !== 0 && scrollDirection === UP
         }),
-        u.map(([[amount]]) => {
+        u.map(([[amount], , , , log]) => {
+          log('Upwards crolling compensation', { amount }, LogLevel.DEBUG)
           return amount
         })
       )
@@ -103,5 +106,5 @@ export const upwardScrollFixSystem = u.system(
 
     return { deviation }
   },
-  u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem)
+  u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem, loggerSystem)
 )

src/utils/correctItemSize.ts

@@ -1,3 +1,3 @@
 export function correctItemSize(el: HTMLElement, dimension: 'height' | 'width') {
-  return el.getBoundingClientRect()[dimension]
+  return Math.round(el.getBoundingClientRect()[dimension])
 }