From 07b38a86f2c433e452b549063932586672f96c4f Mon Sep 17 00:00:00 2001
From: globits <globits@outlook.com>
Date: Fri, 17 Jun 2016 17:42:59 +0200
Subject: [PATCH] update items when selectable changes, test provided

---
 iron-selectable.html | 12 +++++++++++-
 test/content.html    | 12 ++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/iron-selectable.html b/iron-selectable.html
index 25cfe91..69c9602 100644
--- 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
index af27cf8..028e028 100644
--- a/test/content.html
+++ b/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() {