VictoryCursorContainer stops registering cursor when moved between charts

[Alexander-AJ-Berman]

Bugs and Questions

Checklist

• This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• I have read through the FAQ and Guides before asking a question

• I am using the latest version of Victory

• I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

Mousing quickly between charts that have a VictoryCursorContainer causes some of the containers to stop tracking the cursor (not firing onCursorChange event).

This looks relatively similar to #1276 but wasn't fixed as part of the MR associated with that issue.

Reproduction

To reproduce this issue, render multiple charts with cursor containers and move between them.

https://codesandbox.io/s/cursorcontainer-not-registering-1nlf5?file=/index.js has a setup to demo this, and here's a short gif of the behavior in which the cursor line stops appearing after mousing between charts:

[Codesleuth]

I am also having this issue. The behaviour changes when using both zoom and cursor containers.

https://codesandbox.io/s/victory-zoom-cursor-issue-s3veg?file=/src/Chart.tsx

Moving the user's cursor over the charts independently (giving the chart state enough time to finish and render) avoids the issue. But, move your cursor left to right and you can immediately see that the cursor seems to disappear. It's not actually gone - it's just at the wrong position. If you're lucky enough, you can still see it (as in my gif above).

[Alexander-AJ-Berman]

Fixed in the merge above

[ifranke]

I still had this problem in 36.4.0 with React 17/18. I solved this by tweaking a full reload like this

const [enterId, setEnterId] = useState(uuidv4());
  const onEnterHandler = useEventCallback(() => {
    setEnterId(uuidv4())
  });

and

...
<div onClick={onClickHandler} onMouseEnter={onEnterHandler} className="h-100 w-100">
      <VictoryChart
        id={enterId}
...