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="<style>" title="<style>" />
After the CSS snippet is plugged into the component holding the anchor the event.target then reliably grabs the <a>
0 Comments