fix: postpone virtualizer creation until overlay is opened (#7277) (#…

…7321)
vaadin · Apr 12, 2024 · b8e00ad · b8e00ad
1 parent a52627f
commit b8e00ad
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/integration/tests/component-relayout-page.test.js b/integration/tests/component-relayout-page.test.js
@@ -1,9 +1,11 @@
 import { expect } from '@esm-bundle/chai';
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { ComboBox } from '@vaadin/combo-box';
 import { ContextMenu } from '@vaadin/context-menu';
 import { MenuBar } from '@vaadin/menu-bar';
 
 [
+  { tagName: ComboBox.is },
   { tagName: ContextMenu.is },
   {
     tagName: MenuBar.is,

diff --git a/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js b/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js
@@ -132,23 +132,17 @@ export const ComboBoxScrollerMixin = (superClass) =>
       this.addEventListener('click', (e) => e.stopPropagation());
 
       this.__patchWheelOverScrolling();
-
-      this.__virtualizer = new Virtualizer({
-        createElements: this.__createElements.bind(this),
-        updateElement: this._updateElement.bind(this),
-        elementsContainer: this,
-        scrollTarget: this,
-        scrollContainer: this.$.selector,
-      });
     }
 
     /**
      * Requests an update for the virtualizer to re-render items.
      */
     requestContentUpdate() {
-      if (this.__virtualizer) {
-        this.__virtualizer.update();
+      if (!this.opened) {
+        return;
       }
+
+      this.__virtualizer.update();
     }
 
     /**
@@ -208,11 +202,21 @@ export const ComboBoxScrollerMixin = (superClass) =>
       return item === selectedItem;
     }
 
+    /** @private */
+    __initVirtualizer() {
+      this.__virtualizer = new Virtualizer({
+        createElements: this.__createElements.bind(this),
+        updateElement: this._updateElement.bind(this),
+        elementsContainer: this,
+        scrollTarget: this,
+        scrollContainer: this.$.selector,
+      });
+    }
+
     /** @private */
     __itemsChanged(items) {
-      if (this.__virtualizer && items) {
-        this.__virtualizer.size = items.length;
-        this.__virtualizer.flush();
+      if (items && this.__virtualizer) {
+        this.__setVirtualizerItems(items);
         this.requestContentUpdate();
       }
     }
@@ -225,10 +229,24 @@ export const ComboBoxScrollerMixin = (superClass) =>
     /** @private */
     __openedChanged(opened) {
       if (opened) {
+        if (!this.__virtualizer) {
+          this.__initVirtualizer();
+
+          if (this.items) {
+            this.__setVirtualizerItems(this.items);
+          }
+        }
+
         this.requestContentUpdate();
       }
     }
 
+    /** @private */
+    __setVirtualizerItems(items) {
+      this.__virtualizer.size = items.length;
+      this.__virtualizer.flush();
+    }
+
     /** @private */
     __selectedItemChanged() {
       this.requestContentUpdate();

diff --git a/packages/combo-box/test/lazy-loading.test.js b/packages/combo-box/test/lazy-loading.test.js
@@ -1023,6 +1023,10 @@ describe('lazy loading', () => {
           const pages = spyDataProvider.getCalls().map((call) => call.args[0].page);
           expect(pages).to.contain(1);
         });
+
+        it('should reset visible items count to 0', () => {
+          expect(getVisibleItemsCount(comboBox)).to.equal(0);
+        });
       });
 
       describe('using data provider, lost focus before data is returned', () => {