LoicMahieu/material-ui-color-picker

bug: unable to set value

id0Sch opened this issue · 5 comments

Hi,
i have multiple entities which are forms - when selecting an entity im loading it's state into the form
and when the inputs change i gather the inputs
examples:

#componentWillReceiveProps
this.bannerUrl.getInputNode().value = get(nextProps.page, 'bannerUrl', null)

#onInputChanged
const bannerUrl = this.bannerUrl.getValue()

#render
<TextField floatingLabelText="Banner url" ref={input => this.bannerUrl = input}
                     onChange={() => this.onInputChanged()}/>

however when using the color-picker, I can't seem to do so.
tried using setValue , .value on the ref object like so:

<ColorPicker name="color"
                       floatingLabelText="Status bar color"
                       defaultValue="#00000"
                       onChange={ () => this.onInputChanged()}
                       ref={input => this.statusBarColor = input}/>

but it doesn't work,
i also tried setting like this:

<ColorPicker name="color"
                       floatingLabelText="Status bar color"
                       value={color}
                       onChange={ (c) => this.onInputChanged('statusBarColor',c)}

but it doesn't work as well.
any suggestions to how to solve this issue?
thanks

Hi @id0Sch

Mmmh... I almost never use ref. I can't tell you how looks the object you get as statusBarColor and if the value and setValue() is defined. (I suppose the problem is here ?)
I generally only use onChange() for updating the internal state of a "form" on top of the field.

I could take a look when I will have time to but feel free to investigate and submit a PR if need!

I think the object that is returned from the ref should be compliant to how you'd interact with a regular material-ui TextField, and indeed the problem is here.
since implementing the colorPicker is further down my todo list, i'll get to it later, for now a simple textField does the trick :)

I'll keep you posted if I have a breakthrough,
thanks for the quick reply!

@LoicMahieu - I don't know how to work with recompose but it seems that this is where the bug is, i tried deleting the "withState" and i was able to control the textFields value from the ref , but the colorPicker didn't have access to setValue.
maybe it should be internally and externally accessible.
I would be happy to solve it, but unfortunately i have no experience with recompose yet.

  • material-ui-color-picker@3.1.0