diff --git a/src/platform/web/ui/general/LazyListView.js b/src/platform/web/ui/general/LazyListView.js index d94487ba..b0d28c51 100644 --- a/src/platform/web/ui/general/LazyListView.js +++ b/src/platform/web/ui/general/LazyListView.js @@ -271,9 +271,15 @@ export class LazyListView extends ListView { if (this._renderRange.containsIndex(idx)) { const normalizedIdx = this._renderRange.normalize(idx); if (bottomCount === 0) { - // We're completely scrolled; so the extra element needs to be removed from top - this._removeChild(this._childInstances.shift()); - this._renderRange = new ItemRange(topCount + 1, renderCount, bottomCount); + /* + If we're at the bottom of the list, we need to render the additional item + without removing another item from the list. + We can't increment topCount because the index topCount is not affected by the + add operation (and any modification will thus break ItemRange.normalize()). + We can't increment bottomCount because there's not enough items left to trigger + a further render. + */ + this._renderRange = new ItemRange(topCount, renderCount + 1, bottomCount); } else { // Remove the last element, render the new element @@ -295,10 +301,8 @@ export class LazyListView extends ListView { const normalizedIdx = this._renderRange.normalize(idx); super.onRemove(normalizedIdx, value); if (bottomCount === 0) { - const child = this._childCreator(this._itemAtIndex(topCount - 1)); - this._childInstances.unshift(child); - this._root.insertBefore(mountView(child, this._mountArgs), this._root.firstChild); - this._renderRange = new ItemRange(topCount - 1, renderCount, bottomCount); + // See onAdd for explanation + this._renderRange = new ItemRange(topCount, renderCount - 1, bottomCount); } else { const child = this._childCreator(this._itemAtIndex(this._renderRange.lastIndex - 1));