diff --git a/iron-selectable.html b/iron-selectable.html
index 25cfe91..b70a952 100644
--- a/iron-selectable.html
+++ b/iron-selectable.html
@@ -151,6 +151,10 @@
}
},
+ listeners: {
+ 'dom-change': '_onDomChange'
+ },
+
observers: [
'_updateAttrForSelected(attrForSelected)',
'_updateSelected(selected)',
@@ -346,19 +350,32 @@
// observe items change under the given node.
_observeItems: function(node) {
- return Polymer.dom(node).observeNodes(function(mutation) {
- this._updateItems();
-
- if (this._shouldUpdateSelection) {
- this._updateSelected();
- }
+ return Polymer.dom(node).observeNodes(this._onChildlistMutation.bind(this));
+ },
- // Let other interested parties know about the change so that
- // we don't have to recreate mutation observers everywhere.
- this.fire('iron-items-changed', mutation, {
- bubbles: false,
- cancelable: false
+ _onDomChange: function(event) {
+ var localTarget = Polymer.dom(event).localTarget;
+ if (localTarget.parentNode === this) {
+ this._onChildlistMutation({
+ target: this,
+ addedNodes: [],
+ removedNodes: [],
});
+ }
+ },
+
+ _onChildlistMutation: function(mutation) {
+ this._updateItems();
+
+ if (this._shouldUpdateSelection) {
+ this._updateSelected();
+ }
+
+ // Let other interested parties know about the change so that
+ // we don't have to recreate mutation observers everywhere.
+ this.fire('iron-items-changed', mutation, {
+ bubbles: false,
+ cancelable: false
});
},
diff --git a/test/template-repeat.html b/test/template-repeat.html
index b1ab6a6..f595bc4 100644
--- a/test/template-repeat.html
+++ b/test/template-repeat.html
@@ -31,7 +31,7 @@
-
+
{{item.name}}
@@ -47,6 +47,9 @@
setup(function() {
scope = document.querySelector('template[is="dom-bind"]');
s = scope.$.selector;
+ s.multi = false;
+ s.attrForSelected = null;
+ s.selected = 1;
t = scope.$.t;
t.items = [{name:'item0'}, {name: 'item1'}, {name: 'item2'}, {name: 'item3'}];
});
@@ -96,6 +99,84 @@
assert.isTrue(item.classList.contains('iron-selected'));
});
+ test('dom-change triggers selected item update (select by index)', function() {
+ t.items = [
+ t.items[3],
+ t.items[0],
+ t.items[2],
+ t.items[1]
+ ];
+ Polymer.dom.flush();
+
+ var selected = Polymer.dom(s).querySelectorAll('.iron-selected');
+ expect(selected.length).to.equal(1);
+ expect(selected[0].id).to.equal('item0');
+ });
+
+ test('dom-change triggers selected item update (select by attribute)', function() {
+ s.attrForSelected = 'id';
+ s.selected = 'item1';
+ t.items = [
+ t.items[3],
+ t.items[0],
+ t.items[2],
+ t.items[1]
+ ];
+ Polymer.dom.flush();
+
+ var selected = Polymer.dom(s).querySelectorAll('.iron-selected');
+ expect(selected.length).to.equal(1);
+ expect(selected[0].id).to.equal('item1');
+ });
+
+ test('dom-change triggers selected item update (multi, select by index)', function() {
+ s.multi = true;
+ s.selectedValues = [0, 3];
+ Polymer.dom.flush();
+
+ var selected = Polymer.dom(s).querySelectorAll('.iron-selected');
+ expect(selected.length).to.equal(2);
+ expect(selected[0].id).to.equal('item0');
+ expect(selected[1].id).to.equal('item3');
+
+ t.items = [
+ t.items[3],
+ t.items[0],
+ t.items[2],
+ t.items[1]
+ ];
+ Polymer.dom.flush();
+
+ var selected = Polymer.dom(s).querySelectorAll('.iron-selected');
+ expect(selected.length).to.equal(2);
+ expect(selected[0].id).to.equal('item3');
+ expect(selected[1].id).to.equal('item1');
+ });
+
+ test('dom-change triggers selected item update (multi, select by attribute)', function() {
+ s.multi = true;
+ s.attrForSelected = 'id';
+ s.selectedValues = ['item1', 'item2'];
+ Polymer.dom.flush();
+
+ var selected = Polymer.dom(s).querySelectorAll('.iron-selected');
+ expect(selected.length).to.equal(2);
+ expect(selected[0].id).to.equal('item1');
+ expect(selected[1].id).to.equal('item2');
+
+ t.items = [
+ t.items[3],
+ t.items[0],
+ t.items[2],
+ t.items[1]
+ ];
+ Polymer.dom.flush();
+
+ var selected = Polymer.dom(s).querySelectorAll('.iron-selected');
+ expect(selected.length).to.equal(2);
+ expect(selected[0].id).to.equal('item2');
+ expect(selected[1].id).to.equal('item1');
+ });
});