Accepting null as default color

[shilo-ey]

What is the current behavior?

When initiating the Color Picker without a default color and without color conversion interactions (e.g hex, rgba etc...), the following unwanted behavior occurs:

1. The result input (pcr-result) stays empty even after I assign a color in the color palette
2. The Color Palette is empty (without any color) before selecting a color, as you can see below:
   
3. The opacity and hue slider handles are unselected (without a fill)

Please provide the steps to reproduce and create a JSFiddle.

https://jsfiddle.net/4tvadnqp/
Bug reproduces in this link ^

What is the expected behavior?

1. The result input should change after I specify a color in the palette or in the swatches
2. The color palette should present a range of colors to pick from

Thanks!

[simonwep]

You need to specify a base / default color. Which color do you expect to be displayed if you pass an empty string?

Pickr can't display no color (how should this even look like?) and an empty string is invalid.

The expected behavior is what you see since pickr can't be initialized without providing a initial color value.

[shilo-ey]

Hi @simonwep

Thanks for your reply,

You answered only to my second question, as for the other two:
Even when I don't pass any color value, I expect to see the color field changes as I change the color picker sampler (inside the color canvas or selecting a pre-saved color).
I don't expect to see a color on the first opening state of course...

In addition, I would expect to see the opacity and hue slider handles selected (the circle wrapping those pickers should be as when I single click on them)

see ex. here: https://www.loom.com/share/e2e980ed12664ee2b9f81c7c7ec9aec2

Thanks!

[simonwep]

Hey @shilo-ey :)

The problem is, you can't pass no value, so you can't expect to work with it without providing a very base value. Use white or whatever to at least give it the opportunity to initialize.

If you don't pass a default value (there's a reason it's called default, it's mandatory) it won't work...

Regarding focus-border on the pickr-circles, I'll add these. Do you mind creating another issue for it since it's related to UI?

[shilo-ey]

Hi @simonwep

Thanks.

Regarding opening a new issue for the focus-border on the pickr-circles - no problem.

As for the default color value:

If you don't pass a default value (there's a reason it's called default, it's mandatory) it won't work...

I don't mind the default being a mandatory setting, but I wish it would allow passing NULL or empty value as a valid value, which it currently doesn't.

Just for clarification:
My use case is that I'm loading default color values through CSS, and if the user wants to modify the value specifically only then I would like to populate the color picker control.

Thanks for your efforts.

[simonwep]

Okay, If null would work... what color do you expect to be "selected" e.g. how should each component look?

What you could do is using white and clear it immediately after initialization: https://jsfiddle.net/Simonwep/nvzbrcLm/
Edit: Please note that in the fiddle a color is used which is in this case white.

[simonwep]

@shilo-ey Ok, let me try to explain it:

These things (Marked with a red circle):

Need to be somewhere, the cannot be invisible or whatever.
So you need to provide an initial state for them that they where they should stay.

By providing null you're basically telling them "Hey, I don't know where you should stay - do whatever you want" which isn't possible and makes no sense.

If you say default: 'white' you'll say "Okay, please adjust all these controls accordingly to my default color" - which is fine and you can use setColor(null) to tell pickr that you want to have no color chosen (this isn't the same as having no color selected (which is impossible)).

So there are basically two colors:

1. The first one is the color which is selected, the button for example will use it. This color can be null since it just displays a color or an x
2. The second color can't be null since DOM-Elements depend on it and aren't capable of deciding where they should stay.

[simonwep]

And if I'd update it for accepting a null value, you would still need to specify a base-value.

[simonwep]

And if you absolutly need to accept a null value, you can write a very small wrapper function for it:

const createPickrInstance = options => {
  const noDefault = !options.default;
  const instance = new Pickr({
    ...options,
    ...(noDefault && {default: 'white'})
  })

  if (noDefault) {
    const resetColor = () => {
      instance.setColor(null);
      instance.off('init', resetColor);
    };

    instance.on('init', resetColor);
  }

  return instance;
}

fiddle

As you can see you specify a color (white), if I'd accept null I'd need to add another option which specifies the fallback color (And since that can be solved with that little workaround I'd love to leave it out).

[shilo-ey]

Hi @simonwep

Thank you for your patience and time.

I think this discussion got off topic a bit.

The empty result input issue after dragging the picker in the canvas only occurs when you don't specify an interaction color format (hexa, rgba...)

For example:
Here is a fiddle that works perfectly with the interaction color format being defined: Fiddle
And here is a fiddle that has this issue with, because I didn't define an interaction color format: Fiddle

Thanks

[NateSeymour]

Good afternoon, @shilo-ey

Neither of your fiddles work, Simon and I are unsure of what you're trying to get at here.

Let me try and simplify this:

You seem to be trying to use pickr in a use case that it was never intended for and I'm not exactly sure why. Pickr needs to be initialized with a default color, so do that. Use white for example as @simonwep has said multiple times.

You can then use defaultRepresentation when using a named color to change the default representation/add the color button like in your above fiddles as such (from README):

// Default color representation of the input/output textbox.
// Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
defaultRepresentation: 'HEX',

Pickr must be initialized with a default value. Period.

I understand that you would like to populate the colors with CSS, and that's something that we can help you figure out (I assume that it has something to do with the way Elementor is built). That being said, we are not going to rewrite a large section of well tested and reliable code to facilitate your one use case that honestly doesn't make much sense to me.

Why can't you use one of the workarounds that @simonwep has suggested?

I'm closing this issue. Have a nice day.