virtual-scroller 1.12.0 → 1.12.2

package/source/ItemHeights.js

@@ -169,7 +169,7 @@ export default class ItemHeights {
 				const previousHeight = this._get(i)
 				const height = this._measureItemHeight(i, firstShownItemIndex)
 				if (previousHeight !== height) {
-					warn('Item index', i, 'height changed unexpectedly: it was', previousHeight, 'before, but now it is', height, '. An item\'s height is allowed to change only in two cases: when the item\'s "state" changes and the developer calls `setItemState(i, newState)`, or when the item\'s height changes for any reason and the developer calls `onItemHeightDidChange(i)` right after that happens. Perhaps you forgot to persist the item\'s "state" by calling `setItemState(i, newState)` when it changed, and that "state" got lost when the item element was unmounted, which resulted in a different height when the item was shown again having its "state" reset.')
+					warn('Item index', i, 'height changed unexpectedly: it was', previousHeight, 'before, but now it is', height, '. Whenever an item\'s height changes for whatever reason, a developer must call `onItemHeightDidChange(i)` right after that change. If you are calling `onItemHeightDidChange(i)` correctly, then there\'re several other possible causes. For example, perhaps you forgot to persist the item\'s "state" by calling `setItemState(i, newState)` when that "state" did change, and so the item\'s "state" got lost when the item element was unmounted, which resulted in a different item height when the item was shown again with no previous "state". Or perhaps you\'re running your application in "devleopment" mode and `VirtualScroller` has initially rendered the list before your CSS styles or custom fonts have loaded, resulting in different item height measurements "before" and "after" the page has fully loaded.')
 					// Update the item's height as an attempt to fix things.
 					this._set(i, height)
 				}

package/source/VirtualScroller.onRender.js

@@ -77,7 +77,7 @@ export default function() {
 
 		let layoutUpdateReason
 
-		if (this.updateLayoutAfterRenderBecauseItemHeightChanged) {
+		if (itemHeightHasChanged) {
 			layoutUpdateReason = LAYOUT_REASON.ITEM_HEIGHT_CHANGED
 		}
 

package/source/getVerticalSpacing.js

@@ -6,9 +6,12 @@ export default function getVerticalSpacing({ itemsContainer, renderedItemsCount
 		while (i < renderedItemsCount) {
 			const itemTopOffset = itemsContainer.getNthRenderedItemTopOffset(i)
 			const itemHeight = itemsContainer.getNthRenderedItemHeight(i)
-			// If next row is detected.
-			if (itemTopOffset !== firstShownRowTopOffset) {
+			// See if the item is on the next row.
+			// Simply checking for `itemTopOffset !== firstShownRowTopOffset` wouldn't work
+			// because items in a row aren't required to be aligned to the top border.
+			if (itemTopOffset >= firstShownRowTopOffset + firstShownRowHeight) {
 				// Measure inter-row spacing.
+				// Can't be "negative" with the current `if` condition.
 				return itemTopOffset - (firstShownRowTopOffset + firstShownRowHeight)
 			}
 			// A row height is the maximum of its item heights.