From b8e00ad4de9843f4ffec1a30f9d0b3f6cfdea4a1 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Fri, 12 Apr 2024 10:12:13 +0300
Subject: [PATCH] fix: postpone virtualizer creation until overlay is opened
 (#7277) (#7321)

---
 .../tests/component-relayout-page.test.js     |  2 +
 .../src/vaadin-combo-box-scroller-mixin.js    | 44 +++++++++++++------
 packages/combo-box/test/lazy-loading.test.js  |  4 ++
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/integration/tests/component-relayout-page.test.js b/integration/tests/component-relayout-page.test.js
index a7401df927..1c7401ab29 100644
--- 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
index c5611e7cc0..9e12a0654f 100644
--- 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
index eba3128e5c..69d51b09c7 100644
--- 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', () => {