Disabled items can't be selected

Fixes PolymerElements#99

iron-multi-selectable.html

@@ -50,13 +50,19 @@
     ],
 
     /**
-     * Selects the given value. If the `multi` property is true, then the selected state of the
-     * `value` will be toggled; otherwise the `value` will be selected.
+     * Selects the given value if it's item is not disabled.
+     * If the `multi` property is true, then the selected state of the `value` will be toggled;
+     * otherwise the `value` will be selected.
      *
      * @method select
      * @param {string|number} value the value to select.
+     * @returns Returns true if `value` could be selected or toggled.
      */
     select: function(value) {
+      if (this._isIneligibleForSelection(this._valueToItem(value))) {
+        return false;
+      }
+
       if (this.multi) {
         if (this.selectedValues) {
           this._toggleSelected(value);
@@ -66,6 +72,7 @@
       } else {
         this.selected = value;
       }
+      return true;
     },
 
     multiChanged: function(multi) {

iron-selectable.html

@@ -172,34 +172,64 @@
     },
 
     /**
-     * Selects the given value.
+     * Selects the given value if it's item is not disabled.
      *
      * @method select
      * @param {string|number} value the value to select.
+     * @returns Returns true if `value` could be selected.
      */
     select: function(value) {
+      if (this._isIneligibleForSelection(this._valueToItem(value))) {
+        return false;
+      }
       this.selected = value;
+      return true;
     },
 
     /**
-     * Selects the previous item.
+     * Selects the previous enabled item.
      *
      * @method selectPrevious
+     * @returns Returns true if any item could be selected.
      */
     selectPrevious: function() {
+      if (this.selected == null) {
+        return false;
+      }
+
       var length = this.items.length;
       var index = (Number(this._valueToIndex(this.selected)) - 1 + length) % length;
-      this.selected = this._indexToValue(index);
+      var curr = index + 1;
+      while (index != curr) {
+        if (this.select(this._indexToValue(index))) {
+          break;
+        }
+        index = (index - 1 + length) % length;
+      }
+      return index != curr;
     },
 
     /**
-     * Selects the next item.
+     * Selects the next enabled item.
      *
      * @method selectNext
+     * @returns Returns true if any item could be selected.
      */
     selectNext: function() {
-      var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.length;
-      this.selected = this._indexToValue(index);
+      if (this.selected == null) {
+        return false;
+      }
+
+      var length = this.items.length;
+      var index = (Number(this._valueToIndex(this.selected)) + 1 + length) % length;
+      var curr = index - 1;
+      while (index != curr) {
+        if (this.select(this._indexToValue(index))) {
+          break;
+        }
+        index = (index + 1 + length) % length;
+      }
+      return index != curr;
     },
 
     /**
@@ -242,10 +272,10 @@
     },
 
     _updateSelected: function() {
-      this._selectSelected(this.selected);
+      this._selectSelected();
     },
 
-    _selectSelected: function(selected) {
+    _selectSelected: function() {
       this._selection.select(this._valueToItem(this.selected));
     },
 
@@ -337,8 +367,14 @@
           {selected: value, item: item}, {cancelable: true}).defaultPrevented) {
         this.select(value);
       }
-    }
+    },
 
+    _isIneligibleForSelection: function(item) {
+      if (item) {
+        return item.hasAttribute('disabled');
+      }
+      return false;
+    }
   };
 
 </script>

test/basic.html

@@ -55,7 +55,7 @@
         <div id="item0">Item 0</div>
         <div id="item1">Item 1</div>
         <div id="item2">Item 2</div>
-        <div id="item3">Item 3</div>
+        <div id="item3" disabled>Item 3</div>
         <div id="item4">Item 4</div>
       </iron-selector>
     </template>
@@ -145,6 +145,18 @@
         assert.equal(selectedEventCounter, 0);
       });
 
+      test('select disabled item', function() {
+        // setup listener for iron-select event
+        var selectedEventCounter = 0;
+        s2.addEventListener('iron-select', function(e) {
+          selectedEventCounter++;
+        });
+        // selecting a disabled item shouldn't change selected value
+        s2.select('item3');
+        assert.equal(s2.selected, 'item2');
+        assert.equal(selectedEventCounter, 0);
+      });
+
       test('force synchronous item update', function() {
         expect(s2.items.length).to.be.equal(5);
         Polymer.dom(s2).appendChild(document.createElement('div'));

test/next-previous.html

@@ -51,6 +51,26 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="test3">
+    <template>
+      <iron-selector selected="0">
+        <div>Item 0</div>
+        <div disabled>Item 1</div>
+        <div>Item 2</div>
+      </iron-selector>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="test4">
+    <template>
+      <iron-selector>
+        <div disabled>Item 0</div>
+        <div disabled>Item 1</div>
+        <div disabled>Item 2</div>
+      </iron-selector>
+    </template>
+  </test-fixture>
+
   <script>
 
     var s;
@@ -128,6 +148,62 @@
 
     });
 
+    suite('next/previous one item disabled', function() {
+
+      setup(function () {
+        s = fixture('test3');
+      });
+
+      test('selectNext', function() {
+        assert.equal(s.selected, 0);
+        var nextResult = s.selectNext();
+        assert.isTrue(nextResult);
+        assert.equal(s.selected, 2);
+        nextResult = s.selectNext();
+        assert.isTrue(nextResult);
+        assert.equal(s.selected, 0);
+      });
+
+      test('selectPrevious', function() {
+        assert.equal(s.selected, 0);
+        var previousResult = s.selectPrevious();
+        assert.isTrue(previousResult);
+        assert.equal(s.selected, 2);
+        previousResult = s.selectPrevious();
+        assert.isTrue(previousResult);
+        assert.equal(s.selected, 0);
+      });
+
+      test('selectNext/Previous', function() {
+        assert.equal(s.selected, 0);
+        var nextResult = s.selectNext();
+        assert.isTrue(nextResult);
+        assert.equal(s.selected, 2);
+        var previousResult = s.selectPrevious();
+        assert.isTrue(previousResult);
+        assert.equal(s.selected, 0);
+      });
+
+    });
+
+    suite('next/previous all items disabled', function() {
+
+      setup(function () {
+        s = fixture('test4');
+      });
+
+      test('selectNext/Previous', function() {
+        assert.isUndefined(s.selected);
+        var nextResult = s.selectNext();
+        assert.isFalse(nextResult);
+        assert.isUndefined(s.selected);
+        var previousResult = s.selectPrevious();
+        assert.isFalse(previousResult);
+        assert.isUndefined(s.selected);
+      });
+
+    });
+
   </script>
 
 </body>