plotOptions events issue when using state/redux

[leonardolessa]

Bug or Feature Request?

Bug

Description

When you define events inside plotOptions, it look like the previous event listeners are not "dead" as you change the state, or someway the previous state keeps stored.

How to reproduce

Define an event inside plotOptions object and try to interact with state (or redux state) as it changes. At some point you'll get the previous state value.

In my project, I'm beeing able to reproduce using the redux state, for some reason the chart event gets several previous values of the redux store.

Live demo demonstrating bug

https://stackblitz.com/edit/react-1wm1vu Just keep looking at the console and mouseOvering the chart until the state changes, the logger will log both null and "testing" after the state changes.

Versions

• React JSX Highcharts version: 3.6.1 and 4.0.0-alpha
• Highcharts version: 7.2.0
• React version: 16.9.0

[leonardolessa]

I was testing again and It looks like the points that were hovered before the state changes, always get the previous values after the change. I could reproduce with the click event too, inside "series" property, but in this case the state value is always the initial one (null).

[anajavi]

This is a bug on Highcharts side.

I created a reproduction with pure Highcharts in https://jsfiddle.net/vopcu8mt/

[anajavi]

I created a issue in Highcharts repository: https://github.com/highcharts/highcharts/issues/12067

[anajavi]

This can be actually worked around on react-jsx-highcharts, but let's see what Highcharts has to say about it first.

@leonardolessa as you have tried the v4 alpha, can you share your experience in #228, or just add +1 if it works for you?

[leonardolessa]

Hi @anajavi, thanks a lot for your quick response, I really appreciate it.

I've briefly tested v4 alpha to reproduce the issue, but I'll have a try until the end of the day in my charts, I use a lot of features of this lib so I guess I can be helpful.

Thanks again!

[anajavi]

I don't know if your real world case can be worked around with useRef, but here's edited stackblitz which works with it: https://stackblitz.com/edit/react-znpnkp?file=Hello.js

It's just a workaround though, a real fix is needed.

[anajavi]

It seems that this can't be worked around in react-jsx-highcharts. We have to wait for Highcharts to fix the bug.