value for controlled component not working

[loicmahieu]

value for controlled component not working

[vorvex]

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

[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.

[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 }}
      />

[viclafouch]

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

[eugeneZolotarenko]

I have the same thing =(

[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}
      />