I’ve added a click event to a FontAwesome icon that checks the icon’s classList and performs a function according to what it finds. Unfortunately, it looks like the classList is dependent upon what part of the icon the user clicks. I’ve added a console.log statement for the event.target and the event.target.classList so I can see what’s going on, and here’s what I’ve found. If the user clicks directly on the white space just outside the check mark, the event.target.value is:
<svg class="checkin-icon green" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" icon="[object Object]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
and the event.target.classList is:
DOMTokenList [ "checkin-icon", "green" ]
This is what I want to see! If, however, the user clicks directly on the lines of the check mark, what we get instead is:
<path d="M173.898 439.404l-166.4-….207 9.997-36.204-.001z">
This does me no good whatsoever.
This looks like this is specific to React’s FontAwesome package. When I do the same thing in standard HTML/JS with an
<i> element, everything works just fine, regardless of where I click.
I’ve tried wrapping the icon in a span to get the same event.target regardless of click area, and I get the same result. I tried wrapping it in a div, also the same result. What can I do to make the click event the same regardless of what part of the icon the user clicks? Or is there a way to integrate the standard
<i> icon into React without having to use the React FontAwesome package?