update items when selectable changes, test provided, closes #126

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);

test/content.html

@@ -142,6 +142,18 @@
         assert.isTrue(s2.querySelector('#item4').classList.contains('iron-selected'));
       });
 
+      test('selectable property changes', 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() {