The left edge of the 2.13.7 version picks up the color BUG

[sjwl123]

Zài shí sè qì zuǒ cè biānyuán shíqǔ yánsè shí, yánsè huì tiào dào zuì yòubiān huò zhōngjiān
25/5000
When you pick a color on the left edge of the color picker, the color jumps to the far right or middle

[automachina]

I had the same issue but was able to patch it out.
When the tinycolor constructor ingests an hsv value it turns the saturation and value into
percentages using the convertToPercentage function.

// https://github.com/bgrins/TinyColor/blob/master/tinycolor.js : 1034
function convertToPercentage(n) {
    if (n <= 1) {
        n = (n * 100) + "%";
    }

    return n;
}

The function treats any value <= 1 as a unit value (value between 0 and 1) and thus multiplies it by 100 to produce a percentage. So when you approach the left edge of the color picker you'll break that threshold and end up with unexpected values (i.e. 1 becomes 100; moving the indicator / color saturation all the way right). I patched the saturation and bright calculation in the "helpers/saturation.js" file to produce a unit value instead of the 0 to 100 value. This way it's not fighting the tinycolor library's strange behavior.

diff --git a/node_modules/react-color/lib/helpers/saturation.js b/node_modules/react-color/lib/helpers/saturation.js
index e50db13..f8af15d 100644
--- a/node_modules/react-color/lib/helpers/saturation.js
+++ b/node_modules/react-color/lib/helpers/saturation.js
@@ -23,8 +23,8 @@ var calculateChange = exports.calculateChange = function calculateChange(e, hsl,
     top = containerHeight;
   }
 
-  var saturation = left * 100 / containerWidth;
-  var bright = -(top * 100 / containerHeight) + 100;
+  var saturation = left / containerWidth;
+  var bright = 1 - top / containerHeight;
 
   return {
     h: hsl.h,
 

[karambaJob]

@casesandberg
same problem in current version 2.17.3, Safari 12.1 (14607.1.40.1.4)

[scotthwsnyder]

@casesandberg - can you integrate kgapich's change? I would love to use this.

[casesandberg]

This has been fixed with #670 and will be released shortly as [email protected]

[Wink007]

This has been fixed with #670 and will be released shortly as [email protected]

problem still exists #701