Update items when selectable property changes, test provided, issue P…

…olymerElements#126
globits · Mar 13, 2017 · f13fd8c · f13fd8c
1 parent f894fa4
commit f13fd8c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/iron-selectable.html b/iron-selectable.html
@@ -96,7 +96,10 @@
        * This is a CSS selector string.  If this is set, only items that match the CSS selector
        * are selectable.
        */
-      selectable: String,
+      selectable: {
+        type: String,
+        observer: '_selectableChanged'
+      },
 
       /**
        * The class to set on elements when selected.
@@ -268,6 +271,13 @@
       this._addListener(eventName);
     },
 
+    _selectableChanged: function() {
+      this._updateItems();
+      if (this._shouldUpdateSelection) {
+        this._updateSelected();
+      }
+    },
+
     _updateItems: function() {
       var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
       nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);

diff --git a/test/content.html b/test/content.html
@@ -142,6 +142,18 @@
         assert.isTrue(s2.querySelector('#item4').classList.contains('iron-selected'));
       });
 
+      test('selectable property changed', function() {
+        s2.selectable = 'hr';
+        // check items length
+        assert.equal(s2.$.selector.items.length, 2);
+        s2.selectable = 'item';
+        s2.selected = 'item4';
+        // check items length
+        assert.equal(s2.$.selector.items.length, 5);
+        // check selected class
+        assert.isTrue(s2.querySelector('#item4').classList.contains('iron-selected'));
+      });
+
     });
 
     suite('content with dom-repeat', function() {