React-vis: Listeners get clobbered

Created on 13 Apr 2017 · 8Comments · Source: uber/react-vis

There is a reasonably frequent bug in which onValueMouseOut/onSeriesMouseOut listeners are not called due to the presence of other listeners. This often occurs in conjunction with the presence of animation. (To wit, check out the animated sunburst for more)

Source

mcnuttandrew

Most helpful comment

I got this working by turning animation off when onValueMouseOver is called and then turning it back on when onValueMouseOut is called

Vednus on 13 Oct 2017

👍6

All 8 comments

This is what I was running into in my other PR - in my experience onMouseLeave is more reliable

samhogg on 13 Apr 2017

@mcnuttandrew @samhogg Are there any updates on this issue? Is there a resolution that was reached that you can share. Let me know if I can be of any help. I'm facing this issue on all the MarkSeries graphs that I'm rendering and as a workaround I right now bind the esc key and have an additional x on the Hint to close the hint.

The onValueMouseOver gets triggered but onValueMouseOut is not getting triggered for me.

ajainarayanan on 10 Jul 2017

For reference I have created this webpackbin if someone wants to try to reproduce the issue: https://www.webpackbin.com/bins/-Kok65xQnKmQZ5sp6xvL. The onmouseover triggers all the time but not the onmouseout event handler. Not sure if anything can be done on the react-vis layer. Probably an issue with chrome may be (https://github.com/facebook/react/issues/4492)? 🤔

Sorry my bad. I have updated the webpack bin url with the right fix. On mouseover gets called until I move my mouse out and when mouse out even listener is triggered react seems to be batching the setStates and the resetting of hints is lost I believe. The current fix I have in there fixes showing/hiding the hints correctly.

ajainarayanan on 11 Jul 2017

@ajainarayanan are you able to clarify what the fix is, that works with animation?