Clicking ReactSVGPanZoom component does not trigger blur events on other elements

[otake]

If you are focused on an input element outside of SVG, and there is a blur event listener on that input. Clicking the SVG does not fire the blur event handler on the input and does not lose focus.

event.preventDefault() on mousedown events seems to interfere with this.

src/features/interactions.js: 48 - in function onMouseDown

Everything seems to work as expected when I remove the preventDefault(). Is there a specific reason to call event.preventDefault() on all the mouse events?

[chrvadala]

I've just tested it. I tried to remove the preventDefault from onMouseDown, onMouseMove, onMouseUp and onDoubleClick actions. Apparently the default of the browser is to select elements outside the canvas and so the preventDefault is necessary to avoid this.

I've also observed that you are right. The prevent default doesn't release the input focus. https://jsfiddle.net/gc26pd0u/

I have to investigate on it. If you have any suggestions le me know.

[otake]

Oh I see, that makes sense that you need to stop text from highlighting while dragging the svg. Maybe you only need that preventDefault in onMouseMove?

I worked around my specific problem anyway so its not a huge deal.

[shaileshsakaria]

@otake - can you please describe more on worked around you added?