[BUG] When cancel Colorpicker, it set wrong value for component

[longdoan7421]

1. Are you using the latest release (older versions are NOT supported)?
   Yes.

2. Are you facing the bug with your local copy of GrapesJS or with the current demo?
   Both of them.

3. Steps to reproduce:

   • Drag a component then change its background color from input
   • Open color picker immediately
   • Then click to outside color picker (anywhere except canvas)

4. What is the expected behavior?
   Background color should keep remain.

5. What happens instead?
   Background color change to previous color or #000000.

6. Screencast

   

[longdoan7421]

Hi @artf,
After seeing around the colorpicker, I think the problem is that the spectrum doesn't have the same value as model when user changes input.
So I attempted to sync the value of spectrum and model, and it could fix the issue. Here is my solution:

// InputColor.js
  /**
   * Set value to the model
   * @param {string} val
   * @param {Object} opts
   */
  setValue(val, opts = {}) {
    const model = this.model;
    const def = model.get('defaults');
    const value = !isUndefined(val) ? val : !isUndefined(def) ? def : '';
    const inputEl = this.getInputEl();
    const colorEl = this.getColorEl();
    const valueClr = value != 'none' ? value : '';
    inputEl.value = value;
    colorEl.get(0).style.backgroundColor = valueClr;

    // This prevents from adding multiple thumbs in spectrum
    if (opts.fromTarget || (opts.fromInput && !opts.avoidStore)) { // when input changed, update value in spectrum
      colorEl.spectrum('set', valueClr);
      this.noneColor = value == 'none';
    }
  },

What do you think about this? If it's ok, I could submit a PR.

Thank you.

[longdoan7421]

I found out that this bug also happen if you change the input with any value, then immediately open colorpick then cancel it by clicking outside (not canvas).