Properties of elements inside the list not reseted when element gets recycled

[NicolasRannou]

Description

Given the following setup:

<iron-list id="feeds" items="[[feeds]]" as="feed" selection-enabled multi-selection>
  <template>

    <chris-feed index="[[index]]" feed="[[feed]]" opened="[[selected]]"></chris-feed>

  </template>
</iron-list>

<chris-feed> properties:

properties: {
    feed: {
      type: Object
    },

    opened:{
      type: Boolean
    },

    index: {
      type: Number
    },

    checked: {
      type: Boolean
    }
}

If I set checked = true in my <chris-feed>, when I scroll down the list, I will find another <chris-feed> item checked.

As I understand it, it happens because elements are being re-cycled by the <iron-list>.

Is it the expected behavior? Shouldn't the element's property be cleaned up somehow? My current workaround is to attach the checked property inside the feed object in the <chris-feed> element.

Expected outcome

Properties should be reset when an element of the list is being recycled.

Actual outcome

Properties are not being reset.

Browsers Affected

• Chrome
• Firefox
• Safari 9

[Westbrook]

Does this happen if your properties have default values?

[NicolasRannou]

Yes still the same issue!

If I just "check" one element, it seems OK.
If I check 2 elements problem happens.

I also have an observer on the "check" property to add/remove class to the feed:

 _checkedChanged: function(){

  // add/remove class
  if( this.feed ){

    this.checked ? this.$.feed.classList.add('checked') : this.$.feed.classList.remove('checked');
    this.fire('checked', this.feed);

    }

 },

[NicolasRannou]

Live demo:
http://jsbin.com/xopelec/1/edit?html,output

[blasten]

@NicolasRannou I believe you are setting states imperatively. e.g. calling x-element.toggle(). That won't reset the state once that x-element is recycled. Instead what you can do is have a binding to the checked property in x-element.

e.g.

<iron-list id="list" items="[[items]]" as="item" selection-enabled multi-selection>
  <template>
    <div>
     <x-element checked="[[selected]]"><x-element/>
    </div>
  </template>
</iron-list>

In your original comment, you have opened="[[selected]]", but it's not very clear how checked is set. If you set checked from a property effect such as an observer when opened changed, then it should work.

[NicolasRannou]

Hmm I tried many things but I couldn't get it to work.
http://jsbin.com/qowazicoqo/edit?html,output

Is it a bad practice with the iron-list to dynamically add classes to the element?

 _checkedChanged: function(){

  this.checked ? this.$.element.classList.add('checked') : this.$.element.classList.remove('checked');

 }

[barnomics]

I can replicate this with an even simpler example. Its not just properties but pseudo css classes too.

[barnomics]

Description

Given an iron-list, i expect properties and pseudo css classes to reset as I scroll through the list. Take the collapse.html demo and add a simple item:hover{ background: red; } class to the css.

Expected outcome

When I scroll down a list, future items should not have the red background.

Actual outcome

Very often I will see a red background on the incoming items.

Steps to reproduce

1 Take the collapse.html demo and add this to the CSS

      .item:hover {
        background: red;
      }

2 Open the demo. Hover over an item and see the hover class applied.
3 Scroll down the list at a reasonable rate.

This seems to be most reproducible when you hover over any item that is not the first item in the list

[jogibear9988]

Wouldn't it a good Idea, that we support a non Recyling mode? For example in WPF you can specify if a Vistualizing Stackpanel recycles or not!

[Maggie199]

I'm facing similar issue when trying to delete items from the list