Why does it need two clicks in D3.js for my click event to fire?

Question

I have a button inside a svg foreignObject and I have appended a click event to the foreignObject via D3. The click event fires, but only the second time I click the foreignObject. What happens on first click is that the button gets active (blue border). So once it is active it only takes one click to fire the event.

I suppose the problem is that the group to which the button is appended somehow is in the background, but I am not sure because the issue occurs with only one <g> added, too.

I have also tried binding the click event directly to the button, too. But the behaviour did not change.

Here is my code (this is close to as minimal as I needed to make it work): JSFiddle

How can I change it, so that the click event fires every time (at first click) ?

Answer 1

One option would be to not use raise()

Instead of

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);<--- seems like raise eating up the event.
}

use this

function dragstarted(d) {
  d3.select(this).classed("active", true);
}

working code here