Legend event onLeave

[peteranderss0n]

Expected behavior

When I place the mouse outside the legend I expect the onLeave event to be called all the time.

Current behavior

In the example at https://www.chartjs.org/docs/latest/samples/legend/events.html you can hover over a legend. If you quickly place the mouse outside the chart, content sometimes are highlight anyway due to onLeave isn't called.

On this image you can see that red are still highlighted, although the cursor are outside:

I added a console.log to the onHover and onLeave handler in the example and received this when the cursor is outside the the chart but the color are still highlighted:

Reproducible sample

https://codesandbox.io/s/react-chartjs-2-chart-js-issue-template-forked-3kw5p0?file=/src/App.tsx

Optional extra steps/info to reproduce

Drag the mouse between one of the legends and then up to the next. The problem occurs perhaps 1/10 times

Possible solution

While trying to find a fix for this, I played around with attaching a mouseout event, it worked better but I had problem cleaning up the eventlistener.

Context

No response

chart.js version

v3.7.1

Browser name and version

No response

Link to your project

No response