diff --git a/packages/combo-box/src/vaadin-combo-box-item-mixin.js b/packages/combo-box/src/vaadin-combo-box-item-mixin.js index 2fccd50371..a023389f1a 100644 --- 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 index 2d5a361736..accb3b6c81 100644 --- 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'); + }); });