Deprecated spectrum-picker / color-picker onChange error

Grafana Plugin Development
1

According to the latest version of PLUGIN_DEV.md, as of v4.6, spectrum-picker is to be replaced by color-picker, with slightly different syntax.

In preparation, I tried adding the new version.
From this

<spectrum-picker ng-model="ctrl.panel.LabelColor" ng-change="ctrl.render()" ></spectrum-picker>

To this
<color-picker color="ctrl.panel.LabelColor" onChange="ctrl.render()"></color-picker>

I’m getting javascript errors in the onChange function call

react-dom.production.min.js:27 Uncaught TypeError: this.props.onChange is not a function
    at t.onColorSelect (ColorPicker.tsx:13)
    at t.setColor (ColorPickerPopover.tsx:37)
    at t.sampleColorSelected (ColorPickerPopover.tsx:42)
    at ColorPalette.tsx:36
    at Object.u (react-dom.production.min.js:26)

Looking in the color-picker code, I see the call

  onColorSelect(color) {
    this.props.onChange(color);
  }

I even tried removing the onChange attribute all together
<color-picker color="ctrl.panel.LabelColor"></color-picker>

the same error message occurs when the selection is changed - it seems props.onChange is not being set by this syntax.

I can’t find any grafan plugin samples in Guthub using the new color-picker syntax, so maybe this is not yet ready for prime-time.

Any ideas?

2

@mdmoore
Hello,
I am trying to use the color-picker too, the same way you are using it (by defining ‘color’ and ‘onChange’ attributes).

However every time, i get the same error with the one you describe above;
‘Uncaught TypeError: this.props.onChange is not a function’.

Did you find out what is the problem of that and how we can fix it?
Please any suggestion will be very appreciated!
Thank you.

3

It’s been a long time since I looked at any of this - so I may be wrong.

As far as I can tell, I never implemented the change, leaving the color-picker code as-is.

On the other hand, I found this note that seems to answer the question - apparently, the OnChange function uses function binding instead of value binding.

See here:

This should be a simple enough change - I will put thi son my to-do list for when I get around to Grafana updates again.

Cheers and good luck.

4

Update - I’ve spent a few minutes reading through the link I gave above - and it seems MUCH more complicated and unclear than I had at first thought.

Over a year has passed now, so I expect this has been resolved. Just keep digging - and please let me know what you find. I, too, will be looking into this when I have some spare time. In the meantime, I think the old spectrum-picker still works. For the time being, at least.

5

@mdmoore
Thank you for the reply and the link! I will have a look at it!

I am using the color-picker into other html files, and it is working great (I pass the function i want to call whenever the user chooses a color, to the ‘onChange’ property). However for some reason it is not working now in the html file i am trying to implement it.

I have realized that the function i pass (to the ‘onChange’ property) is called whenever there is a change in the panel, and not when I choose a color. For example, when i click on somewhere else than the color-picker, the function that is passed is called. But when i click on a color, the error, we described above, shows up.

If i manage to find out what is the problem, i will keep you updated. Thank you again!

6

@mdmoore

After a lot of tries, i realized that there is no problem with the color picker.
I am just not passing right the function i would like to call, and as a result the function binding is not working properly.

Try passing the function without any brackets, and see if that works:

   <color-picker color="ctrl.panel.LabelColor" onChange="ctrl.render"></color-picker>