React: Click events are swallowed by SVG <use> elements in IE

[edmellum]

We've only managed to replicate this in Edge and <=IE11, not Chrome or Firefox. We've created a demo of the issue with this jsbin.

We're using a common SVG element and linking to it with xlink:href as is common with SVG icons. When linking to the icons with a <use> tag inside an anchor, all click events on the icon will not bubble to onClick handlers on the anchor.

An example: I have a common SVG element with an icon <svg><rect id="my-icon" width="100" height="100"></rect></svg>. I then make a link containing my icon <a href="https://github.com"><svg dangerouslySetInnerHTML={{__html: '<use xlink:href="#my-icon"></use>'}}></svg></a>. As xlink:href isn't supported by react yet, we have to use dangerouslySetInnerHTML. If we now click the SVG any onClick handlers on the anchor will not run.

A temporary workaround is setting pointer-events: none on the SVG element inside the anchor.

This might be a dupe of #1509

[sophiebits]

Does this work correctly outside of React? This just sounds like an IE bug.

[edmellum]

Looking at this jQuery bug this seems to have been an issue in Chrome earlier too, but it seems to have been fixed in Chrome now as I could only replicate it in Edge and the IEs. As this is only a bug that occurs when using event delegation and seeing as that's the only way to do onClick in React I feel like this needs to be fixed.

[sophiebits]

Sorry for the delay on this. We don't use SVG with React much so this hasn't been a big priority for us. Do you have a suggestion for how React could fix this?

[talldan]

We also seem to be experiencing the same thing on iOS Safari. We're not using anchors, but have an svg inside a button with a click event bound to it, and when clicking the svg the click event is not triggered. Here's a similar report on the issue jQuery had:
http://stackoverflow.com/questions/25259825/svg-use-xlink-buggy-click-event

[edmellum]

No problem on the delay. :)

I think I have a working solution that has no real drawbacks as far as I can see. I'll make a PR within the next couple of days.

[Shepard]

Just some interlinking for future Googlers:
The bug is reported for Edge here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10583086/
And also talked about here: http://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element

[piotr-cz]

I'm attaching an onMouseDown event to <use> parent element: <g> and started having problems after upgraded to Edge 41 (EdgeHTML 16).

<g onMouseDown={ () => console.log('mouseDown') }>
  <use xlinkHref="#gc-block-symbol" />
</g>

No problem when attaching listener manually/ directly to either <use> or <g>, using addEventlistener.

Seems like this jQuery issue is related

[gaearon]

If you have some problem with React and you're sure it's not a browser problem, please file a new issue. We don't read or act on closed issues.

[matthew-dean]

Per the Stack Overflow comments, what worked for us was just to add pointer-events: none to <svg> and <use> elements.