Active bar and tooltip persist despite mouse cursor leaving chart area

[robmorieson]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

• Navigate to the provided reproduction link
• Hover the mouse cursor over the bars within the chart
• Move the cursor back outside of the chart area
• Repeat this action until a bar remains in an active state despite the mouse no longer hovering over the chart

What is expected?

The active bar and tooltip should only be visible while actively hovering over a bar.

What is actually happening?

The active bar and tooltip persist even when the mouse cursor is no longer hovering over the chart.

Environment	Info
Recharts	v2.12.6
React	18.0.0
System	MacOS
Browser	Chrome 124.0.6367.91 (Official Build) (arm64)

---

• This issue only seems to occur when the activeBar prop is present on the <Bar> component

• Smaller charts seem to reproduce the bug more frequently and at slower mouse speeds

• Loom screen capture of the issue:
  https://www.loom.com/share/39c983069fda4f5f81c3881672d1aeba?sid=9a27723f-6eb9-4d73-a4f0-16973994439a

[ckifer]

It would be nice if there was an always-reproducable reason for this as it took me quite some time to have happen to me.

I also cannot reproduce in Firefox, only Chrome.

@HHongSeungWoo any thoughts since I think you dealt with this before with active tooltip a little bit?

[benschwarz]

Confirming, I observed the bug, only in Chrome. Not in Firefox.

[ckifer]

Weird..

[HHongSeungWoo]

It appears that the mouseout and mouseleave events are not being received due to component re-rendering.
I think we need to delegate the handling of mouse events to the parent