PolymerElements
Properties of elements inside the list not reseted when element gets recycled
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
- [x] Chrome
- [x] Firefox
- [x] Safari 9
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 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.
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');
}
I can replicate this with an even simpler example. Its not just properties but pseudo css classes too.
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
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!
