mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
443 stars 58 forks source link

Manually clearing color has unexpected behavior #104

Closed momijizukamori closed 1 year ago

momijizukamori commented 1 year ago

First off, thank you for this little library, it's just what I needed! This is the config I'm using:

Coloris({
  alpha: false,
  theme: 'pill',
  closeButton: true,
  clearButton: true
});

The 'Clear' button behaves like I expect it to (clearing the color, leaving the text input empty and the color swatch as the 'transparent background' view). Trying to 'manually' clear the field (by deleting the color code in the text input of the picker) does not behave as expected - when I close the picker, the text input goes to #000000. I can then backspace the in-page text input and it clears 'properly', but that's a bit round-about and I think is going to frustrate some users (this is an application where 'no color' is a valid and not-uncommon choice). I will probably see about binding a handler to the change function to deal with it, but thought I should probably report it :)

momijizukamori commented 1 year ago

Additional note after I poked at the code base some - changing the event handler here https://github.com/mdbassit/Coloris/blob/main/src/coloris.js#L999 to

  addListener(colorValue, 'change', event => {
      if (colorValue.value.length == 0) {
        pickColor('');
      } else if (currentEl || settings.inline) {
        setColorFromStr(colorValue.value);
        pickColor();
      }
    });

produces the behavior I was expecting - sliders and the gradient map selector remain at whatever they were at for the last 'real' color, and changing any of them will result in the colorValue field being filled, but if you close (either via button or by clicking elsewhere on the page), the behavior is the same as the clear button.

(apologies for the edits, fighting with Markdown)

mdbassit commented 1 year ago

Thank you for your kind words! Indeed, it could be more intuitive to do it like you suggested. I'll make the change soon.

melloware commented 1 year ago

0.21.0 is now in NPM: https://www.npmjs.com/package/@melloware/coloris