Fixes #82: Update items on dom-change events from `<template is='do…

…m-*'>` children.
PolymerElements · May 31, 2016 · 5326046 · 5326046
1 parent 2cc798d
commit 5326046
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 12 deletions.
diff --git 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
@@ -31,7 +31,7 @@
 <body>
 
   <template is="dom-bind">
-    <iron-selector id="selector" selected="1">
+    <iron-selector id="selector">
       <template id="t" is="dom-repeat">
         <div id$="[[item.name]]">{{item.name}}</div>
       </template>
@@ -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');
+      });
     });
 
   </script>