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) => {
e.preventDefault();
console.log(event.target)
window.confirm(‘Do you really want to delete: ‘ + partname) ? deletePart(e.target.dataset.part_id, e.target.dataset.meeting_id) : false;
}
}>
<FontAwesomeIcon icon=’trash-alt’ />
</a>

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 event.target then reliably grabs the <a>

0 Comments

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…

Squarespace Image Export

To gain continued access to your Squarespace website images after cancelling your subscription you have several...

MySQL 8.x GRANT ALL STATEMENT

-- CREATE CREATE USER 'tgnrestoreuser'@'localhost' IDENTIFIED BY 'AppleSauceLoveBird2024'; GRANT ALL PRIVILEGES ON...

Exetel Opt-Out of CGNAT

If your port forwards and inbound and/or outbound site-to-site VPN's have failed when switching to Exetel due to their...