iron-list does not show all items on bound array change

[dstefanox]

Attached is example which demonstrates bug.
Simple component is created which contains iron-list, which is bound to array, which is filled on the click of a button on demo page.
When page is initially loaded, on first click, only first item is shown in iron-list, although list contains 15 items. On second click, list shows all items.
Attached archive contains two screenshots which illustrate problem, as well as minimal source code to reproduce issue.

bug-report-iron-list.zip

[freshp86]

I have faced the same issue, where only one element is rendered, even though the bound array has more elements. I noticed that resizing the window causes all of the elements in the bound array to be rendered. So my workaround for now is to fire a 'resize' event manually on the parent.

[jpodwys]

I, too, would like to see this fixed.

[geekgonecrazy]

I have a case where we're loading some data over a websocket. I then update the Array. It behaves the same way as described by @dstefanox

[plequang]

Hi @dstefanox,

I think the behavior you observe is due to iron-list not being explicitely sized in you example, as explained in the iron-list documentation (https://elements.polymer-project.org/elements/iron-list) :

Important: iron-list must either be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (e.g. the flex or fit classes).

You can see the difference by adding the following style attribute to your example :

<iron-list id="requestList" items="{{requests}}" as="item" style="height: 400px">

Of course, you will probably prefer using layout classes rather than using such a fixed size.

In your example, it works on second click because after first click, iron-list has estimated the height to render all items (based on rendering one). That's also why you can see iron-list has changed its height after first click.

@freshp86: This is also what's happening when resizing the window, because iron-list re-render itself upon resize events.

I guess this issue should be moved to https://github.com/PolymerElements/iron-list

[TimvdLippe]

@plequang is correct that <iron-list> needs an explicit size. Given the age of this issue and per above comment I assume it has been fixed in the mean time, I am closing this issue.