Working around SVG Swallowing Click Events

Written by James McDonald

July 7, 2018

I have used FortAwesome/react-fontawesome to put a trash icon on a nextjs react page.

<a data-part_id={id} data-meeting_id={meetingId} onClick={(e) => {
window.confirm(‘Do you really want to delete: ‘ + partname) ? deletePart(, : false;
<FontAwesomeIcon icon=’trash-alt’ />

The problem is that when I click on the anchor link the SVG inside is picked up and then the code fails to pass the data-* attributes to the function

To work around this using styled JSX requires the use of a :global statement to make the required pointer-events: none apply to the svg tag inside the FontAwesomeIcon component

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20jsx%3E%7B%60%0A%20%20%20%20%20%20%20%20%20%20%20%20a%20%3E%20%3Aglobal(svg)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%60%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

After the CSS snippet is plugged into the component holding the anchor the then reliably grabs the <a>


Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…