Polymer iron-list showing outdated items

Question

I have an iron-list element with about 500 items in it and have implemented a filter function (like the one in How to filter an iron-list in polymer 1.0? ). Showing and filtering items works good, except when my filter gets too restrictive: in that case some items are shown that do not match the current filter but the one before that. To my understanding - when the number of items in iron-list decreases - already created displayed (virtual) items are not get deleted.

Example: The items {A, B, C, D, E, F, G, H, I} match filter X. The iron-list element has 5 virtual elements (simplified markup):

<iron-list>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</iron-list>

Then I change the filter to Y with only H and I as matching items: The updated markup looks like this:

<iron-list>
    <div>H</div>
    <div>I</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</iron-list>

I expected only two div elements within the iron-list but it seems to keep a constant number of virtualized items. I tried to update the element by invoking notifyResize() and other methods (see https://www.webcomponents.org/element/PolymerElements/iron-list/elements/iron-list ) but with no effect.

Any ideas, apart from manually delete the spare virtual elements?

Answer 1

Obviously iron-list adds a "hidden" attribute to virtual elements that should not be visible - which I did not notice before.

So adding a CSS directive like

#list .item[hidden] { display: none; }

solves the problem mentioned above.

Answer 2

I don't think there is another options beside deleting manually the array or using notifyResize. Obviously I would go for the second.

Without seeing your code I don't know why it does nor work for you, but here is a similar situation using notifyResize.