Issue #2683Opened March 25, 2020by longdoan74210 reactions

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

Question

  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

    grapesjs-backgroundcolor

Answers (2)

longdoan7421March 25, 20200 reactions

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.

longdoan7421March 25, 20200 reactions

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).

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.