Mouseout, mouseenter, and mouseleave events not always triggering

[mkomaiha]

Expected Behavior

Mouse entering and leaving the chart should fire 'mouseout', 'mouseenter', and 'mouseleave' events .

Current Behavior

The events are only fired when the mouse leaves the window or enters after leaving the window, i.e. opening the console / devtools and hovering over that and then back to the chart or hovering over the browser header.

Possible Solution

Steps to Reproduce

Codepen Example https://codepen.io/mlpkos/pen/Vwpexvq
Create a chart with enabled ['mouseenter', 'mouseleave', 'mouseout'] events hover back and forth over the graph.

{
options: {
    events: ['mouseenter', 'mouseleave', 'mouseout', 'mousedown', 'mouseup', 'mousemove'],
    onHover: (evt, _, chart) => {
      if (evt.native.type !== 'mousemove') {
        console.log(evt.native.type)
      }
    }
  }
}

Context

I am currently running a custom tooltip on 2.9.4 that depends on the mouseenter and leave events to trigger other actions on the page. I am currently trying to upgrade to 3.x, but having difficulties becuase of the events not firing. These events used to fire correctly in 2.9.4 (I added a toggle to switch versions on the codepen, but note switching back to 3.2.1 after switching to 2.9.4 fixes the problem. I'm guessing it correctly attaches the event listeners).

Environment

• Chart.js version: 3.2.1
• Browser name and version: Chrome 90
• Link to your project: Not public

[sdehm]

I am seeing some issues from this as well. Looks like it started in v3.1.0. If you modify the codepen in this issue to use v3.0.2 rather than 3.2.1 it seems to work.

[mkomaiha]

@scdehmlow Thanks for pointing that out! After looking through the changes it seems to be caused by #8794. onHover events are only called if the event is in the chartArea, but I guess when leaving the chart the event is considered outside of the chartArea. In the case that hover events should still be limited I think mouseout and mouseleave events should still be fired even if they are not in the chartArea.

[kurkle]

are you all using onHover to catch mouseleave?

[sdehm]

Yes, my use case is some custom hovering logic similar to the sample at https://www.chartjs.org/docs/latest/samples/advanced/programmatic-events.html but triggered by a function set in the onHover option. Without the mouseout or mouseleave events working I can't trigger the custom highlighting to reset (chart.setActiveElements([]);). My current workaround is to capture on mousemove as well as the other default events and it works as desired if the mouse spends enough time over a blank part of the chart to reset the hover. However, if the mouse moves out too quickly, the mousemove event doesn't fire and the custom highlight is not properly reset leading to some strange behavior. Before v3.1.0 the mouseout event would trigger my reset function as desired.

[kurkle]

In v3 to get the non-hover events, you'll need a simple plugin: https://codepen.io/kurkle/pen/wvJooda

[sdehm]

That solution seems to do what I need it to do. Thanks!