iron-select event is not always fired because dom-repeat recycles nodes

[justincy]

Description

The iron-select event is not always fired when using dom-repeat to list items because dom-repeat recycles DOM nodes. Say we have a list where the first item is selected. Then we unshift an item to the front of the list. The DOM contents are changed but the DOM nodes are reused. No change is detected because selectedItem in the iron-selectable behavior is pointing to the recycled DOM node.

Related to https://github.com/PolymerElements/iron-selector/issues/130 and solvable by https://github.com/Polymer/polymer/pull/4363

Expected outcome

Either the selection changes to remain in the first position and a iron-select event is fired or the first item remains selected when bumped to the second position.

Actual outcome

No change events are emitted.

Live Demo

http://jsbin.com/menudapoha/edit?html,console,output

Steps to reproduce

1. Select the first item in a list
2. Unshift an item onto the list

Browsers Affected

Likely all browsers but I only tested Chrome.

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[justincy]

As a work around you can force the selection to change to a different item then return it to the original item, but you'll have to be prepared to handle simultaneous change events. For example:

list.selectIndex(1);
list.selectIndex(0);

[amouratoglou]

hey guys, hope all is good, same problem around here... did you find a better way to manage this issue? i´m on Polymer 2.x

[justincy]

@amouratoglou I'm not aware of any other way.