d3-zoom and react-select conflict

[tunesmith]

It appears I cannot use react-select and d3-zoom at the same time.

(EDIT: Please see the updated codesandbox: https://codesandbox.io/s/xenodochial-mccarthy-sjqv8w?file=/src/App.js and comment out Select on line 61 to see the behavior, rather what is described in the following quote)

https://codesandbox.io/s/wizardly-noyce-zoyndj?file=/src/App.js

In the above code sandbox, as-is, I cannot reliably zoom and choose a select option.

If I comment out react-select on lines 2 and 58, d3-zoom works by itself.

If I instead comment out initZoom() on line 52 (to disable the zoom behavior), the svg shows up and the select works.

I honestly suspect this is more a problem with react-select than with d3-zoom, but the one thing that gives me pause regarding that theory is that I was able to use react-select and cytoscapejs at the same time, with similar mouse-driven zooming features.

I filed a companion bug with react-select. There is also an open stackoverflow question in case someone can find a workaround.

[Fil]

The issue seems independent of whether Select is present or not. But initZoom and the rest are called too early, before the svg is in the DOM, so D3 doesn't select it.

The following works, even if it is probably not the right way to do it in react:

  setTimeout(() => {
    initZoom();
    updateData();
    update();
  }, 1);

[tunesmith]

@Fil those three calls were taken from other examples in an effort to make a minimally reproducible example. In the larger example I'm using with idiomatic react code, the problem still exists.

In the codesandbox, if I wrap those three calls in a useEffect, guaranteeing the svg is in the DOM, the problem still exists.

useEffect(() => {
  initZoom();
  updateData();
  update();
}, [initZoom, updateData, update]);

I also don't understand your comment about the issue being independent of whether Select is present or not. As stated in the bug description, if Select and its import are commented out, the d3-zoom behavior works as expected. So it's dependent, not independent, of whether Select is present.

[Fil]

In the example you've shared the bug was showing whether or not Select was present, and it seemed to me I had identified the cause.

Now, I'm not an expert in React so I can't help you here, but I can transfer this to a discussion; maybe someone else will be able to help.

[tunesmith]

Apologies, @Fil - it appears the lack of a useEffect was causing a race condition that caused it to behave differently for you and I.

Here is an updated codesandbox: https://codesandbox.io/s/xenodochial-mccarthy-sjqv8w?file=/src/App.js

You can see that if you comment out Select on line 61, the zoom behavior works as you'd expect. Uncommenting Select stops the zoom behavior from happening. Please let me know if you have a theory on what might be conflicting.

I will update the description to account for this.

[Fil]

The problem now is that the Select menu has a button, which is… an svg. d3.select("svg") will catch it, and the whole code allows you to zoom the dots … by doing the zoom gesture on that button (which is kinda fun). To fix, add a class or a unique identifier to the target svg and to the d3 code.

[tunesmith]

Oh my god... zooming on that triangle is such a trip. Thanks so much @Fil . Is there a way to send you a virtual beer or snack? This was driving me crazy.