fix: catch rapid size changes missed by ResizeObserver in virtualizer (#10370)

Author: tomivirkki

packages/component-base/src/virtualizer-iron-list-adapter.js

@@ -231,7 +231,16 @@ export class IronListAdapter {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     this._iterateItems((pidx, vidx) => {
       oldPhysicalSize += this._physicalSizes[pidx];
+      const elementOldPhysicalSize = this._physicalSizes[pidx];
       this._physicalSizes[pidx] = Math.ceil(this.__getBorderBoxHeight(this._physicalItems[pidx]));
+
+      if (this._physicalSizes[pidx] !== elementOldPhysicalSize) {
+        // Physical size changed, but resize observer may not catch it if the original size is restored quickly.
+        // See https://github.com/vaadin/web-components/issues/9077
+        this.__resizeObserver.unobserve(this._physicalItems[pidx]);
+        this.__resizeObserver.observe(this._physicalItems[pidx], { box: 'border-box' });
+      }
+
       newPhysicalSize += this._physicalSizes[pidx];
       this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
     }, itemSet);

packages/component-base/test/virtualizer-item-height.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextResize, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { Virtualizer } from '../src/virtualizer.js';
 
@@ -479,3 +479,61 @@ describe('virtualizer - item height - placeholders are disabled', () => {
     expect(item.offsetHeight).to.equal(0);
   });
 });
+
+describe('virtualizer - item height - self-resizing items', () => {
+  // Create a custom element that resizes itself on slotchange
+  // (simulating vaadin-card's behavior, see https://github.com/vaadin/web-components/issues/9077)
+  customElements.define(
+    'resize-item',
+    class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: 'open' }).innerHTML = `<slot></slot>`;
+        this.shadowRoot.addEventListener('slotchange', () => {
+          this.style.display = 'block';
+          this.style.height = '100px';
+        });
+      }
+    },
+  );
+
+  let virtualizer;
+  let scrollTarget;
+
+  beforeEach(() => {
+    scrollTarget = fixtureSync(`
+      <div style="height: 300px;">
+        <div class="container"></div>
+      </div>
+    `);
+    const scrollContainer = scrollTarget.firstElementChild;
+
+    virtualizer = new Virtualizer({
+      createElements: (count) => Array.from({ length: count }, () => document.createElement('div')),
+      updateElement: (el, index) => {
+        el.innerHTML = `<resize-item id="item-${index}">Item ${index}</resize-item>`;
+      },
+      scrollTarget,
+      scrollContainer,
+    });
+
+    virtualizer.size = 100;
+  });
+
+  it('should not overlap items after scrolling', async () => {
+    await contentUpdate();
+    // Scroll manually to the end
+    while (Math.ceil(scrollTarget.scrollTop) < scrollTarget.scrollHeight - scrollTarget.clientHeight) {
+      scrollTarget.scrollTop += 100;
+      await oneEvent(scrollTarget, 'scroll');
+    }
+
+    // Ensure that the first two visible items do not overlap
+    const firstVisibleItem = scrollTarget.querySelector(`#item-${virtualizer.firstVisibleIndex}`);
+    const secondVisibleItem = scrollTarget.querySelector(`#item-${virtualizer.firstVisibleIndex + 1}`);
+
+    expect(firstVisibleItem.getBoundingClientRect().bottom).to.be.at.most(
+      secondVisibleItem.getBoundingClientRect().top,
+    );
+  });
+});

test/integration/virtual-list-card.test.js

@@ -0,0 +1,63 @@
+import { expect } from '@vaadin/chai-plugins';
+import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import '@vaadin/virtual-list';
+import '@vaadin/card';
+
+describe('virtual-list with card items', () => {
+  let virtualList;
+
+  async function contentUpdate() {
+    // Wait for the content to update (and resize observer to fire)
+    await aTimeout(200);
+  }
+
+  beforeEach(async () => {
+    virtualList = fixtureSync(`
+      <vaadin-virtual-list style="height: 300px;"></vaadin-virtual-list>
+    `);
+
+    // Create a renderer that creates a new vaadin-card on each render
+    // See https://github.com/vaadin/web-components/issues/9077
+    virtualList.renderer = (root, _, model) => {
+      root.innerHTML = `
+          <vaadin-card id="card-${model.index}">
+            <div slot="title">Title ${model.index}</div>
+            <div slot="subtitle">Subtitle ${model.index}</div>
+          </vaadin-card>
+        `;
+    };
+
+    virtualList.items = Array.from({ length: 100 }, (_, i) => ({ index: i }));
+    await nextFrame();
+  });
+
+  it('should not overlap items after scrolling', async () => {
+    // Scroll manually to the end
+    while (Math.ceil(virtualList.scrollTop) < virtualList.scrollHeight - virtualList.clientHeight) {
+      virtualList.scrollTop += 100;
+      await oneEvent(virtualList, 'scroll');
+    }
+
+    await contentUpdate();
+
+    // Ensure that the first two visible items do not overlap
+    const firstVisibleItem = virtualList.querySelector(`#card-${virtualList.firstVisibleIndex}`);
+    const secondVisibleItem = virtualList.querySelector(`#card-${virtualList.firstVisibleIndex + 1}`);
+    expect(firstVisibleItem.getBoundingClientRect().bottom).to.be.at.most(
+      secondVisibleItem.getBoundingClientRect().top,
+    );
+  });
+
+  it('should not overlap items after changing scroll position', async () => {
+    virtualList.scrollTop = virtualList.scrollHeight;
+
+    await contentUpdate();
+
+    // Ensure that the first two visible items do not overlap
+    const firstVisibleItem = virtualList.querySelector(`#card-${virtualList.firstVisibleIndex}`);
+    const secondVisibleItem = virtualList.querySelector(`#card-${virtualList.firstVisibleIndex + 1}`);
+    expect(firstVisibleItem.getBoundingClientRect().bottom).to.be.at.most(
+      secondVisibleItem.getBoundingClientRect().top,
+    );
+  });
+});