fix(virtual-scroll): wrong item top calculation and visibility propagation

core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts

@@ -368,15 +368,20 @@ describe('updateVDom', () => {
   it('should initialize empty VDOM', () => {
     const vdom: VirtualNode[] = [];
     const items = [1, 2, 3, 4, 5];
-    const { heightIndex, cells } = mockVirtualScroll(items, () => 20);
-    const range: Range = { offset: 1, length: 4 };
+    const { heightIndex, cells } = mockVirtualScroll(items, () => 20,
+      (_, i) => i === 1 ? 'hola' : null,
+      (_, i) => i === 2 ? 'hola' : null
+    );
+    const range: Range = { offset: 1, length: 6 };
 
     updateVDom(vdom, heightIndex, cells, range);
     expect(vdom).toEqual([
       { cell: cells[1], change: 2, d: false, top: 20, visible: true },
-      { cell: cells[2], change: 2, d: false, top: 40, visible: true },
-      { cell: cells[3], change: 2, d: false, top: 60, visible: true },
-      { cell: cells[4], change: 2, d: false, top: 80, visible: true }
+      { cell: cells[2], change: 2, d: false, top: 30, visible: true },
+      { cell: cells[3], change: 2, d: false, top: 50, visible: true },
+      { cell: cells[4], change: 2, d: false, top: 70, visible: true },
+      { cell: cells[5], change: 2, d: false, top: 80, visible: true },
+      { cell: cells[6], change: 2, d: false, top: 100, visible: true }
     ]);
   });
 

core/src/components/virtual-scroll/virtual-scroll-utils.ts

@@ -46,7 +46,7 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
 
   for (const cell of toMutate) {
     const node = pool.find(n => n.d && n.cell.type === cell.type);
-    const index = cell.index;
+    const index = cell.i;
     if (node) {
       node.d = false;
       node.change = NODE_CHANGE_CELL;

core/src/components/virtual-scroll/virtual-scroll.tsx

@@ -327,9 +327,9 @@ export class VirtualScroll implements ComponentInterface {
     if (cell !== this.cells[index]) {
       return;
     }
-    cell.visible = true;
-    if (cell.height !== height) {
-      console.debug(`[virtual] cell height changed ${cell.height}px -> ${height}px`);
+    if (cell.height !== height || cell.visible !== true) {
+      console.debug(`[virtual] cell height or visibility changed ${cell.height}px -> ${height}px`);
+      cell.visible = true;
       cell.height = height;
       this.indexDirty = Math.min(this.indexDirty, index);
       this.scheduleUpdate();