fix: make sure unhidden combo-box items get re-rendered (#6638)

vaadin · Oct 13, 2023 · a75aa3d · a75aa3d
1 parent 55cd888
commit a75aa3d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/packages/combo-box/src/vaadin-combo-box-item-mixin.js b/packages/combo-box/src/vaadin-combo-box-item-mixin.js
@@ -63,6 +63,21 @@ export const ComboBoxItemMixin = (superClass) =>
       return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
     }
 
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'hidden'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === 'hidden' && newValue !== null) {
+        // The element is being hidden (by virtualizer). Mark one of the __rendererOrItemChanged
+        // dependencies as undefined to make sure it's called when the element is shown again
+        // and assigned properties with possibly identical values as before hiding.
+        this.index = undefined;
+      } else {
+        super.attributeChangedCallback(name, oldValue, newValue);
+      }
+    }
+
     /** @protected */
     connectedCallback() {
       super.connectedCallback();

diff --git a/packages/combo-box/test/item-renderer.test.js b/packages/combo-box/test/item-renderer.test.js
@@ -3,7 +3,7 @@ import { fixtureSync } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import './not-animated-styles.js';
 import '../vaadin-combo-box.js';
-import { getFirstItem } from './helpers.js';
+import { getAllItems, getFirstItem, setInputValue } from './helpers.js';
 
 describe('item renderer', () => {
   let comboBox;
@@ -96,4 +96,18 @@ describe('item renderer', () => {
     comboBox.renderer = () => {};
     expect(getFirstItem(comboBox).textContent).to.equal('');
   });
+
+  it('should restore filtered item content', () => {
+    const contentNodes = comboBox.items.map((item) => document.createTextNode(item));
+
+    comboBox.renderer = (root, _, { item }) => {
+      root.textContent = '';
+      root.append(contentNodes[comboBox.items.indexOf(item)]);
+    };
+
+    comboBox.opened = true;
+    setInputValue(comboBox, 'r');
+    setInputValue(comboBox, '');
+    expect(getAllItems(comboBox)[1].textContent).to.equal('bar');
+  });
 });