value for controlled component not working

[auahmed]

when i pass the in the value, i dont get anything on the text field. not sure if its linked or not and the label just sticks

<ColorPicker fullWidth label='Select Color' value='{newColor}' onChange={color => setNewColor(color)} />

[Jings]

Same here on my end. Component looks like this:

<ColorPicker
    name="primaryColor"
    value={primaryColor}
    // defaultValue="#000"
    onChange={(color: any): void => {
        setPrimaryColor(color);
    }}
/>

With defaultValue the input is set and the color of the value is changing, but the value is not changing. Without defaultValue the input is empty and not changing.

That makes the component useless for me.

[eugeneZolotarenko]

I have the same thing =(

[vorvex]

I have added TextFieldProps={{ value: color }} to the props in order to make it work.

[bitcod3r]

Thanks, @vorvex! I think we need to improve the documentation with some new examples to clarify its usage.

As mentioned in the main description, this component is based in the material-ui TextField component. You can add many other props to improve component behavior and presentation.

In my case, I used a controlled component to show even an icon inside:

<ColorPicker
  id="new-reminder-color"
  name='color'
  value={this.state.color}
  onChange={color => this.handleColorChange(color)}
  TextFieldProps={{ 
    value: this.state.color,
    variant: "outlined",
    className: classes.formInput,
    label: "Reminder Color",
    helperText: "Tag your reminder with a color"
  }}
  InputLabelProps={{
    shrink: true,
  }}
  InputProps={{
    endAdornment: 
      <InputAdornment position="end">
        <Icon className="fas fa-tag" style={{ color: this.state.color }} />
      </InputAdornment>,
  }}
  />

In this example, you have to import the InputAdornment and Icon components form material-ui

[val1991]

@bitcod3r why you have TextFieldProps? It doesn't work for me. I need to set value on IputProps

     <ColorPicker
        label={label}
        variant="outlined"
        value={value}
        onChange={onChange}
        InputProps={{ value: value }}
      />

[rismirnov]

Hey guys! I am using inputRef to display color value

.....
const colorRef = useRef(null);
.....

<ColorPicker
        label={label}
        variant="outlined"
        inputRef={colorRef}
        value={value}
        onChange={(color) => onChange(color); ((colorRef?.current) as any).value = color}
      />

[viclafouch]

This package (https://viclafouch.github.io/mui-color-input/) handles this problem, supports both React 17 / 18 and MUI V5