React-color: Slider does not work if first color as default is #000000 in EditableInput

[alduro]

But then if I click in Saturation, EditableInput changes as expected and Slider works on next click.

[alduro]

Customized color component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import reactCSS from 'reactcss';

import {
  Hue,
  Saturation,
  EditableInput,
} from 'react-color/lib/components/common/';
import { CustomPicker } from 'react-color';

const styles = reactCSS({
  default: {
    input: {
      fontSize: '12px',
    },
    row: {
      display: 'flex',
      alignItems: 'center',
    },
    span: {
      marginLeft: '25px',
    },
    picker: {
      background: '#fff',
      borderRadius: '2px',
      boxShadow: '0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3)',
      boxSizing: 'initial',
      width: '300px',
      fontFamily: 'Menlo',
    },
    saturation: {
      width: '100%',
      paddingBottom: '55%',
      position: 'relative',
      borderRadius: '2px 2px 0 0',
      overflow: 'hidden',
      height: '200px',
    },
    Saturation: {
      radius: '2px 2px 0 0',
    },
    body: {
      padding: '16px 16px 12px',
    },
    controls: {
      display: 'flex',
    },
    color: {
      width: '32px',
    },
    swatch: {
      marginTop: '6px',
      width: '16px',
      height: '16px',
      borderRadius: '8px',
      position: 'relative',
      overflow: 'hidden',
    },
    toggles: {
      flex: '1',
    },
    hue: {
      height: '10px',
      position: 'relative',
      marginBottom: '8px',
    },
    Hue: {
      radius: '2px',
    },
    alpha: {
      height: '10px',
      position: 'relative',
    },
    Alpha: {
      radius: '2px',
    },
  },
});
class HueAndSaturation extends Component {
  render() {
    return (
      <div style={styles.picker}>
        <div style={styles.saturation}>
          <Saturation
            {...this.props}
            style={styles.Saturation}
            onChange={this.props.onChange}
          />
        </div>
        <div style={styles.body}>
          <div style={styles.controls} className="flexbox-fix">
            <div style={styles.toggles}>
              <div style={styles.hue}>
                <Hue
                  {...this.props}
                  style={styles.Hue}
                  onChange={this.props.onChange}
                />
              </div>
            </div>
          </div>
          <div style={styles.input}>
            <div style={styles.row}>
              <EditableInput
                value={this.props.color}
                onChange={this.props.onChange}
              />
              <div style={styles.span}>
                <span>HEX</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

HueAndSaturation.propTypes = {
  color: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

export default CustomPicker(HueAndSaturation);

[esmeneev]

I can confirm this issue too

[workshur]

https://github.com/casesandberg/react-color/issues/455

[sadwizard]

the same way if default #fff

[margox]

+1

[margox]

I find a solution:

const MyColorPicker = ({ color, onChange }) => {

  const handleChange = (colorObj) => {
    // trigger change only when the new color not equal the old color..
    colorObj.hex !== color && onChange(coloObj.hex)
  }

  return <SektchPicker color={color} onChange={handleChange} />
}

[casesandberg]

I'm not sure what the actual problem is here. Does @margox's solution work for you?

[adanielyan]

@margox's solution didn't work for me. I found another strange behavior. When the starting color is #feffff the slider jumps only to distinct colors, such as #fffefe, #fffffe, #fefffe, #fefeff etc. But once a saturation is clicked the behavior is back to normal. BTW, I use the ChromePicker.

[thoreyjona]

Same is happening to me as to @adanielyan. Starting color is #e9e8e8, at first the slider jumps only to distinct colors. When saturation is clicked i goes back to normal. I'm using CustomPicker

[denysbielkin]

Same problem and there is no matter is this EditableInput or just input

[adanielyan]

Has this ever been addressed? @casesandberg please let me know if you need any additional info that will help you with solution.

[hpcodecraft]

Same issue here - my picker consists of <Hue />, <Saturation /> and <EditableInput />, starting color #000000. Saturation is not clickable at all. Downgrading to 2.13.8 resolved the issue for me.