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,
-// - isobject, off, on, ready, request, select, set, template, trigger, underscore,
-// - wait.
+// - each, eachobj, equals, error, extend, find, format, formathtml, get, ht,
+// - html, isobject, off, on, ready, request, select, set, template, trigger,
+// - 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