Always keep a selected item in a iron-list - polymer

Question

<iron-list id="list" class="flex" items="{{data}}" selected-item="{{selectedItem}}" x="[[itemChanged(selectedItem)]]" selection-enabled>
<template>
<div class$="[[_computedClass(selected)]]">
<span class="flex">test</span>
</div>
</template>
</iron-list>
The solution I am looking for is like a radio group where there is always one selection in the iron-list.
I tried
itemChanged: function() {
if (this.selectedItem) {
this.selected = this.$.list.items.indexOf(this.selectedItem);
} else {
if(this.selected != null) { this.$.list.selectItem(this.selected);}
}
},
This ends up in a Uncaught RangeError: Maximum call stack size exceeded.

Answer 1

Here's an implemenation of this behaviour:
<dom-module id="test-element">
<style>
.selected {
background: blue;
color: white;
}
iron-list {
height: 200px;
width:200px
}
</style>
<template>
<iron-list id="list" items="[[data]]" as="item" selection-enabled on-selected-item-changed="itemChanged">
<template>
<div class$="[[_computedClass(selected)]]">[[item.name]]</div>
</template>
</iron-list>
</template>
</dom-module>
<script>
Polymer({
is: "test-element",
properties: {
data: {type: Array,
notify: true,
value: function() { return [
{"name": "Bob"},
{"name": "Tim"},
{"name": "Mike"}
]
;}
},
last: Object
},
ready: function(){
this.last = this.data[0];
},
itemChanged: function(){
if (this.$.list.selectedItem === null) {
this.async(function(){
if (this.$.list.selectedItem === null) {
this.$.list.selectItem(this.last);
}
}.bind(this));
} else {
this.last = this.$.list.selectedItem;
}
},
_computedClass : function(selected) {
return selected? "selected": "";
}
});
</script>
The relevant bit is in the itemChangedchanged function.
One thing that made it tricky, is the fact that the iron-list will trigger two events for each selection. First, it will unselect the previously selected item and then select the new item. So in order to figure out if no new item is selected, you have to wait and see if a new selection event is triggered. That's what I'm using the async for. Then I also store a reference to the previously selected item in the last property. In case no new item is selected, I restore the selection to the last selection.