search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
17.02k stars 1.86k forks source link

Purging and removing element while hovering causes "undefined is not an object" #6047

Open hex2f opened 2 years ago

hex2f commented 2 years ago

So, I'm unsure if this issue is with the react library or this one. But the responsible code resides in this repository so I'll try my luck here.

If you unmount a plot rendered in react while hovering your mouse over it, maindrag.onmouseout gets triggered before all event handlers are completely unregistered.

This causes the error undefined is not an object (evaluating 'gd._fullLayout._hoversubplot = null') at plotly.js:148662==graph_interact.js:79. I looked into it with a breakpoint and the issue seems to be that _fullLayout doesn't exist anymore on gd.

A simple fix (assuming this is an issue with plotly.js and not react-plotly.js) could be to just add || !dg._fullLayout to graph_interact.js:74. If it isn't an issue with plotly itself, it may still be a good idea to wrap the event handlers with try/catch and log a warning about not unmounting correctly instead of a flat out error.

alexcjohnson commented 2 years ago

Good find @leahlundqvist - seems like this may apply to any mouseout handlers (if there are any others) and yes, I think detecting that gd has been purged and short circuiting is the right solution. I’m worried there may be an even more problematic situation if the element is unmounted mid-drag on the plotting area or any other element that creates a dragCover, because these are attached to the DOM outside the main graph div.