Fix color picker input update with missing hex. Closes #3883

src/domain_abstract/ui/Input.js

@@ -58,10 +58,14 @@ export default Backbone.View.extend({
   handleChange(e) {
     e.stopPropagation();
     const value = this.getInputEl().value;
-    this.model.set({ value }, { fromInput: 1 });
+    this.__onInputChange(value);
     this.elementUpdated();
   },
 
+  __onInputChange(value) {
+    this.model.set({ value }, { fromInput: 1 });
+  },
+
   /**
    * Get the input element
    * @return {HTMLElement}

src/domain_abstract/ui/InputColor.js

@@ -6,6 +6,12 @@ import Input from './Input';
 const { $ } = Backbone;
 $ && ColorPicker($);
 
+const getColor = color => {
+  const name = color.getFormat() === 'name' && color.toName();
+  const cl = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
+  return name || cl.replace(/ /g, '');
+};
+
 export default Input.extend({
   template() {
     const ppfx = this.ppfx;
@@ -33,6 +39,21 @@ export default Input.extend({
     this.colorEl.spectrum('destroy');
   },
 
+  __onInputChange(val) {
+    let value = val;
+    const colorEl = this.getColorEl();
+
+    // Check the color by using the ColorPicker's parser
+    if (colorEl) {
+      colorEl.spectrum('set', value);
+      const tc = colorEl.spectrum('get');
+      const color = value && getColor(tc);
+      color && (value = color);
+    }
+
+    this.model.set({ value }, { fromInput: 1 });
+  },
+
   /**
    * Set value to the model
    * @param {string} val
@@ -71,16 +92,12 @@ export default Input.extend({
       var elToAppend = em && em.config ? em.config.el : '';
       var colorPickerConfig =
         (em && em.getConfig && em.getConfig('colorPicker')) || {};
-      const getColor = color => {
-        let cl =
-          color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
-        return cl.replace(/ /g, '');
-      };
 
       let changed = 0;
       let previousColor;
       this.$el.find(`[data-colorp-c]`).append(colorEl);
       colorEl.spectrum({
+        color: model.getValue() || false,
         containerClassName: `${ppfx}one-bg ${ppfx}two-color`,
         appendTo: elToAppend || 'body',
         maxSelectionSize: 8,
@@ -123,12 +140,12 @@ export default Input.extend({
         }
       });
 
-      em &&
-        em.on &&
-        em.on('component:selected', () => {
+      if (em && em.on) {
+        this.listenTo(em, 'component:selected', () => {
           changed = 1;
           colorEl.spectrum('hide');
         });
+      }
 
       this.colorEl = colorEl;
     }

src/style_manager/index.js

@@ -471,11 +471,6 @@ export default () => {
       const lastTarget = targets.slice().reverse()[0];
       const lastTargetParents = this.getParentRules(lastTarget);
       this.model.set({ targets, lastTarget, lastTargetParents });
-      console.log('After', {
-        targets,
-        lastTarget: lastTarget && lastTarget.toCSS(),
-        lastTargetParents: lastTargetParents.map(t => t.toCSS())
-      });
       return targets;
     },
 

src/utils/ColorPicker.js

@@ -502,7 +502,7 @@ export default function($, undefined) {
         // since the set function will not run (default color is black).
         updateUI();
         currentPreferredFormat =
-          opts.preferredFormat || tinycolor(initialColor).format;
+          opts.preferredFormat || tinycolor(initialColor).getFormat();
 
         addColorToSelectionPalette(initialColor);
       } else {