wpColorPicker: How update colors on input value update?

Question

Setup:

• An input field that has attached a wpColorPicker instance.
• An external event that changes the input value color.

Issues:

• On value change the color shown by the colorpicker doesn't get automatically updated, neither the selection when user open up the colorpicker dialog box.

• wpColorPicker doesn't have neitherremove, destroy nor update methods, so there is no simple way to do this.

• And lastly, they wrap the input field in a bunch of other tags to do the styling, so no simple manual removal can be done.

Question:

• How can I update the color on the widget and its selection when user initiates interaction upon field value change?

Answer 1

I was able to solve this by looking into the inner .iris() and check that it has a .('color') method that allows to set a color at runtime.

Thankfully, this .('color') method is supported too by .wpColorPicker(), so one can do:

var new_color = $the_related_field.val();
$the_colorpicker.wpColorpicker('color', new_color);

to overcome the annoyance of not having an update() method.