only dispatch manipulator events if the state is actually changed.

src/scripts/components/select.js

@@ -16,11 +16,18 @@ module.exports = {
 
     var $value = self.$element.select('.value');
 
-    self.on('change', function() {
+    /**
+     * Updates the HTML value of the component to match the slected option's label
+     * @return {void}
+     */
+    function setValueDisplay() {
       var selectedIndex = self.$manipulatorTarget.get('selectedIndex');
       var $options = self.$manipulatorTarget.select('option');
       var value = $options[selectedIndex] && $options[selectedIndex].innerHTML;
       $value.set('innerHTML', value);
-    });
+    }
+
+    setValueDisplay();
+    self.on('change', setValueDisplay);
   }
 };

src/scripts/lib/manipulators.js

@@ -1,35 +1,45 @@
 'use strict';
 
+var _ = require('../vendor/minified')._;
+
 /**
- * @returns {ClayEvents}
+ * @returns {ClayItem|ClayEvents}
+ * @extends {ClayItem}
  */
 function disable() {
+  if (this.$manipulatorTarget.get('disabled')) { return this; }
   this.$element.set('+disabled');
   this.$manipulatorTarget.set('disabled', true);
   return this.trigger('disabled');
 }
 
 /**
- * @returns {ClayEvents}
+ * @returns {ClayItem|ClayEvents}
+ * @extends {ClayItem}
  */
 function enable() {
+  if (!this.$manipulatorTarget.get('disabled')) { return this; }
   this.$element.set('-disabled');
   this.$manipulatorTarget.set('disabled', false);
   return this.trigger('enabled');
 }
 
 /**
- * @returns {ClayEvents}
+ * @returns {ClayItem|ClayEvents}
+ * @extends {ClayItem}
  */
 function hide() {
+  if (this.$element[0].classList.contains('hide')) { return this; }
   this.$element.set('+hide');
   return this.trigger('hide');
 }
 
 /**
- * @returns {ClayEvents}
+ * @returns {ClayItem|ClayEvents}
+ * @extends {ClayItem}
  */
 function show() {
+  if (!this.$element[0].classList.contains('hide')) { return this; }
   this.$element.set('-hide');
   return this.trigger('show');
 }
@@ -40,6 +50,7 @@ module.exports = {
       return this.$manipulatorTarget.get('innerHTML');
     },
     set: function(value) {
+      if (this.get() === value.toString(10)) { return this; }
       this.$manipulatorTarget.set('innerHTML', value);
       return this.trigger('change');
     },
@@ -51,6 +62,7 @@ module.exports = {
       return this.$manipulatorTarget.get('value');
     },
     set: function(value) {
+      if (this.get() === value.toString(10)) { return this; }
       this.$manipulatorTarget.set('value', value);
       return this.trigger('change');
     },
@@ -64,6 +76,7 @@ module.exports = {
       return this.$manipulatorTarget.get('checked') ? 1 : 0;
     },
     set: function(value) {
+      if (!this.get() === !value) { return this; }
       this.$manipulatorTarget.set('checked', !!value);
       return this.trigger('change');
     },
@@ -77,6 +90,7 @@ module.exports = {
       return this.$element.select('input:checked').get('value');
     },
     set: function(value) {
+      if (this.get() === value.toString(10)) { return this; }
       this.$element
         .select('input[value="' + value.replace('"', '\\"') + '"]')
         .set('checked', true);
@@ -97,8 +111,12 @@ module.exports = {
     },
     set: function(values) {
       var self = this;
-      self.$element.select('input').set('checked', false);
       values = values || [];
+
+      if (_.equals(this.get(), values)) { return this; }
+
+      self.$element.select('input').set('checked', false);
+
       values.map(function(value) {
         self.$element
           .select('input[value="' + value.replace('"', '\\"') + '"]')
@@ -120,8 +138,10 @@ module.exports = {
         case 'number': value = value.toString(16); break;
         case 'string': value = value.replace(/^#|^0x/, ''); break;
       }
+      value = value || '000000';
 
-      this.$manipulatorTarget.set('value', value || '000000');
+      if (this.get() === parseInt(value, 16)) { return this; }
+      this.$manipulatorTarget.set('value', value);
       return this.trigger('change');
     },
     disable: disable,

src/scripts/vendor/minified.js

@@ -1,8 +1,8 @@
 // minified.js config start -- use this comment to re-create a configuration in the Builder
 // - Only sections add, always, amdsupport, copyobj, dollardollar,
-// - each, eachobj, error, extend, find, format, formathtml, get, ht, html,
+// - each, eachobj, equals, error, extend, find, format, formathtml, get, ht,
-// - isobject, off, on, ready, request, select, set, template, trigger, underscore,
+// - html, isobject, off, on, ready, request, select, set, template, trigger,
-// - wait.
+// - underscore, wait.
 
 
 // WARNING! This file is autogenerated from minified-master.js and others.
@@ -1550,6 +1550,53 @@ define('minified', function() {
      */
     'each': listBind(each),
 
+    /*$
+     * @id equals
+     * @group LIST
+     * @requires
+     * @configurable default
+     * @name .equals()
+     * @altname _.equals()
+     * @syntax list.equals(otherObject)
+     * @syntax _.equals(thisObject, otherObject)
+     * @module UTIL
+     * Checks whether two values, lists or objects are equal in a deep comparison.
+     *
+     * First <var>equals()</var> checks whether it got a function as parameter.
+     * If yes, it will be invoked without arguments and <var>equals()</var> calls itself recursively with the function's result.
+     *
+     * Once both values are no functions anymore, the values will be evaluated, If the first value is...
+     * <ul><li>...<var>null</var> or <var>undefined</var>, they are only equal if the other one is also either <var>null</var> or <var>undefined</var>.</li>
+     * <li>...a value as defined by ##_.isValue(), but not a Date, they are equal if the other value is the same type and is equal according to the '==' operator.</li>
+     * <li>...a Date, they are equal if the other value is a Date representing the same time.</li>
+     * <li>...a list or array, they are equal if the other value is also either a list or an array, has the same number of items and all items equal the items of the other
+     *         list at the same position. The equality of list items is determined recursively using the same rules, so you can also nest lists.</li>
+     * <li>...a function, it will be invoked without arguments and its return value is evaluated using these rules as if the value has been passed. </li>
+     * <li>...any other object, they are equal if they contain exactly the same keys (as defined by ##_.eachObj()) and all values are equal as determined using these rules
+     *      recursively.</li>
+     * </ul>
+     *
+     * Please note that, according to the rules, a ##list#Minified list## is equal to an array, as long as their content is equal. <var>equals</var> does not
+     * differentiate between <var>null</var> and <var>undefined</var>.
+     *
+     * <var>equals</var> is commutative. If you swap the parameters, the result is the same as long as no functions are involved.
+     *
+     * @example Compare a list and an array:
+     *  <pre>
+     *  _.equals([1, 2, 3], _(1, 2, 3));  // returns true
+     * </pre>
+     *
+     * @example Same result, but with a list method:
+     *  <pre>
+     *  _(1, 2, 3).equals([1, 2, 3]);  // returns true
+     * </pre>
+     *
+     * @param thisObject The first reference to evaluate.
+     * @param otherObject The second reference to evaluate.
+     * @return true if both references are equal. False otherwise.
+     */
+    'equals': listBind(equals),
+
     /*$
      * @id find
      * @group LIST
@@ -2626,6 +2673,9 @@ define('minified', function() {
     // @condblock find
     'find': find,
     // @condend
+    // @condblock equals
+    'equals': equals,
+    // @condend
 
     /*$
      * @id copyobj

test/spec/components/select.js

@@ -3,7 +3,7 @@
 var assert = require('chai').assert;
 var fixture = require('../../fixture');
 
-describe('component - color', function() {
+describe('component - select', function() {
   it('sets the value display to the correct value on change', function() {
     var clayConfig = fixture.clayConfig([
       {

test/spec/lib/manipulators.js

@@ -19,9 +19,10 @@ describe('manipulators', function() {
       it('sets: "' + value + '" and gets: "' + expected + '" then triggers "change"',
       function() {
         var handlerSpy = sinon.spy();
-        var clayItem = fixture.clayItem(itemType);
+        var clayItem = fixture.clayConfig([itemType]).getAllItems()[0];
         clayItem.on('change', handlerSpy);
 
+        clayItem.set(value);
         clayItem.set(value);
         assert.deepEqual(clayItem.get(), expected);
         assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
@@ -45,6 +46,7 @@ describe('manipulators', function() {
           false
         );
         clayItem.disable();
+        clayItem.disable();
         assert.strictEqual(
           clayItem.$element[0].classList.contains('disabled'),
           true
@@ -73,6 +75,7 @@ describe('manipulators', function() {
           true
         );
         clayItem.enable();
+        clayItem.enable();
         assert.strictEqual(
           clayItem.$element[0].classList.contains('disabled'),
           false
@@ -100,6 +103,7 @@ describe('manipulators', function() {
           false
         );
         clayItem.hide();
+        clayItem.hide();
         assert.strictEqual(
           clayItem.$element[0].classList.contains('hide'),
           true
@@ -127,6 +131,7 @@ describe('manipulators', function() {
           true
         );
         clayItem.show();
+        clayItem.show();
         assert.strictEqual(
           clayItem.$element[0].classList.contains('hide'),
           false
@@ -145,6 +150,7 @@ describe('manipulators', function() {
 
   describe('val', function() {
     testSetGet('input', 'test321');
+    testSetGet('input', 1234, '1234');
     testDisable('input');
     testEnable('input');
     testShow('text');
@@ -152,10 +158,10 @@ describe('manipulators', function() {
   });
 
   describe('checked', function() {
-    testSetGet('toggle', true, 1);
+    testSetGet({type: 'toggle', defaultValue: 0}, true, 1);
-    testSetGet('toggle', 1);
+    testSetGet({type: 'toggle', defaultValue: 0}, 1);
-    testSetGet('toggle', false, 0);
+    testSetGet({type: 'toggle', defaultValue: 1}, false, 0);
-    testSetGet('toggle', 0);
+    testSetGet({type: 'toggle', defaultValue: 1}, 0);
     testDisable('toggle');
     testEnable('toggle');
     testShow('toggle');
@@ -185,6 +191,7 @@ describe('manipulators', function() {
     var item = {
       type: 'checkboxgroup',
       clayId: 1,
+      defaultValue: ['two'],
       options: [
         { label: '1', value: 'one' },
         { label: '2', value: 'two' },
@@ -207,9 +214,9 @@ describe('manipulators', function() {
     testSetGet('color', '0xFF0000', 0xff0000);
     testSetGet('color', '#ff0000', 0xff0000);
     testSetGet('color', 0xff0000, 0xff0000);
-    testSetGet('color', '', 0x000000);
+    testSetGet({type: 'color', defaultValue: 0x00ff00}, '', 0x000000);
-    testSetGet('color', false, 0x000000);
+    testSetGet({type: 'color', defaultValue: 0x00ff00}, false, 0x000000);
-    testSetGet('color', undefined, 0x000000);
+    testSetGet({type: 'color', defaultValue: 0x00ff00}, undefined, 0x000000);
     testDisable('color');
     testEnable('color');
     testShow('color');