Problem with opacity + wheel

Hi I found an issue that for the colours red + green the opacity slider also changes the rgb values when the wheel control type is used.

When i click on the blue swatch #00fand change the opacity slider i have the normal behaviour. But when i click the red #f00and change the slider there is also an amount of blue and green added rgb(255,3,7), opacity instead of rgb(255,0,0), opacity.

Which can be seen in the demo below

color_picker_bug_2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Case</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/claviska/jquery-minicolors/master/jquery.minicolors.css">
</head>
<body style="padding: 30px;">

<h3> swatches and opacity + wheel </h3>
<div style="max-width: 300px;">

    <input type="text" id="swatches" class="form-control demo minicolors-input" data-format="rgb" data-control="wheel" data-opacity="1.00" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" data-defaultValue="rgba(255, 255, 255, 1)" value="rgba(255, 255, 255, 1)" size="25">
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/claviska/jquery-minicolors/master/jquery.minicolors.js"></script>

<script>
  $(document).ready(function(){

    $('.demo').each( function() {

     $(this).minicolors({
        control: $(this).attr('data-control') || 'hue',
        defaultValue: $(this).attr('data-defaultValue') || '',
        format: $(this).attr('data-format') || 'hex',
        keywords: $(this).attr('data-keywords') || '',
        inline: $(this).attr('data-inline') === 'true',
        letterCase: $(this).attr('data-letterCase') || 'lowercase',
        opacity: $(this).attr('data-opacity'),
        position: $(this).attr('data-position') || 'bottom',
        swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
        change: function(value, opacity) {
          if( !value ) return;
          if( opacity ) value += ', ' + opacity;
          var rgbObject = $(this).minicolors('rgbObject');
          if( typeof console === 'object' ) {
            console.log(value);
            // console.log(rgbObject);
          }
        },
        theme: 'bootstrap'
      });
    });
  });
</script>  
</body>
</html>

Did you find a fix for this? We're running into this issue as well. To make this easier for @claviska to debug, the bug also appears on the minicolors demo page. To reproduce:

Load https://labs.abeautifulsite.net/jquery-minicolors/.
Copy #667EEA into the hex opacity demo (first demo in the ...and more! section).
Change the opacity.

The original hex value becomes #657ceb.

However, this bug doesn't happen if you start with #FFFFFF or #333333.

This bug also doesn't occur if you first move the hue slider. For instance:

In the hex opacity demo, paste #05ebd0.
Move the hue slider to any position.
Copy this hex value.
Move the opacity slider. The hex value remains the same, as expected.
Paste the hex value from step 2 into the input field.
Move the opacity slider. Now the bug surfaces, changing the hex value.

claviska / jquery-minicolors

Problem with opacity + wheel #279