React OnMouseDown event is not working whereas OnMouseUp is working fine.(on SVG elements)

Question

I am having an svg element on which I need to capture the mousedown event. Here is the code.

//code snippet...
<g onMouseDown={this.clickHandler}>
    <circle ...></circle>
    <text> </text>
</g>

Code for click handler is as simple as this.

clickHandler() {
    alert("mouse down")
 }

onMouseUp and OnClick are working fine, but not the onMouseDown

The same onMouseDown event in working fine outside the SVG (I tried on Button)

Any Idea about the error.

React Version: 16.5.2

Answer 1

OnMouseDown will get a block if you are also having the drag functionality implemented.

To capture the OnMouseDown you need to remove event.stopPropogation() from your dragStartEvent

Another Interesting thing is if you don't want to remove event.stopPropogation() you can still perform the all the operation which you intend to perform on OnMouseDown in dragStartEvent event.

Hope this helps...