fix: update virtualizer size on requestContentUpdate (#7374)

vaadin · May 3, 2024 · b9f590b · b9f590b
1 parent d7eeba2
commit b9f590b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js b/packages/combo-box/src/vaadin-combo-box-scroller-mixin.js
@@ -141,14 +141,20 @@ export const ComboBoxScrollerMixin = (superClass) =>
     }
 
     /**
-     * Requests an update for the virtualizer to re-render items.
+     * Updates the virtualizer's size and items.
      */
     requestContentUpdate() {
-      if (!this.opened) {
+      if (!this.__virtualizer) {
         return;
       }
 
-      this.__virtualizer.update();
+      if (this.items) {
+        this.__virtualizer.size = this.items.length;
+      }
+
+      if (this.opened) {
+        this.__virtualizer.update();
+      }
     }
 
     /**
@@ -223,7 +229,6 @@ export const ComboBoxScrollerMixin = (superClass) =>
     /** @private */
     __itemsChanged(items) {
       if (items && this.__virtualizer) {
-        this.__setVirtualizerItems(items);
         this.requestContentUpdate();
       }
     }
@@ -238,21 +243,12 @@ export const ComboBoxScrollerMixin = (superClass) =>
       if (opened) {
         if (!this.__virtualizer) {
           this.__initVirtualizer();
-
-          if (this.items) {
-            this.__setVirtualizerItems(this.items);
-          }
         }
 
         this.requestContentUpdate();
       }
     }
 
-    /** @private */
-    __setVirtualizerItems(items) {
-      this.__virtualizer.size = items.length;
-    }
-
     /** @private */
     __selectedItemChanged() {
       this.requestContentUpdate();

diff --git a/packages/combo-box/test/external-filtering.common.js b/packages/combo-box/test/external-filtering.common.js
@@ -1,6 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import { aTimeout, enter, fixtureSync, nextRender } from '@vaadin/testing-helpers';
-import { getFocusedItemIndex, setInputValue } from './helpers.js';
+import { getAllItems, getFocusedItemIndex, setInputValue } from './helpers.js';
 
 describe('external filtering', () => {
   let comboBox, overlay;
@@ -84,6 +84,27 @@ describe('external filtering', () => {
     });
   });
 
+  describe('requestContentUpdate', () => {
+    beforeEach(async () => {
+      comboBox = fixtureSync('<vaadin-combo-box></vaadin-combo-box>');
+      comboBox.filteredItems = ['Item 0'];
+      await nextRender();
+      comboBox.opened = true;
+    });
+
+    it('should re-render items after modifying existing filteredItems through mutation', () => {
+      comboBox.filteredItems[0] = 'New Item';
+      comboBox.requestContentUpdate();
+      expect(getAllItems(comboBox).map((item) => item.textContent)).to.eql(['New Item']);
+    });
+
+    it('should re-render items after adding more filteredItems through mutation', () => {
+      comboBox.filteredItems.push('Item 1');
+      comboBox.requestContentUpdate();
+      expect(getAllItems(comboBox).map((item) => item.textContent)).to.eql(['Item 0', 'Item 1']);
+    });
+  });
+
   describe('filtered items attribute', () => {
     beforeEach(async () => {
       comboBox = fixtureSync(`<vaadin-combo-box filtered-items='["a", "b", "c"]' value='b'></vaadin-combo-box>`);