Event srcElement might not have the property className, causing errors on touch devices

[themaxsandelin]

While using this in one of my projects (stellar component btw), I noticed an error while trying to have a click event on a button inside the <TinderCard>. This is the error message I got:

TypeError: ev.srcElement.className.includes is not a function. (In 'ev.srcElement.className.includes('pressable')', 'ev.srcElement.className.includes' is undefined)

After some quick investigation, I noticed it was because I had an SVG icon inside my <button> that, when clicked, lead to the srcElement of the event in question being a <path /> inside that SVG element. Now <path /> doesn't actually have a className property in it's specification, leading to this error. The line in question in the source of react-tinder-card is this one:

react-tinder-card/index.js

Line 174 in b612568

if (!ev.srcElement.className.includes('pressable') && ev.cancelable) {

There might be more references like this one though. But yeah, I think there are several ways to solve this. One would be to simply check that the property className is even defined on the srcElement object. That would of course mean that adding the pressable class on the <button> element still wouldn't make it "pressable" since the srcElement would still be <path /> which doesn't have the className property at all. I solved this by setting pointer-events: none; on the icon components styles. However, this might not be the best solution for everyone.

Just wanted to throw that your way since I'm sure there will be someone else who runs into this issue eventually. I also tried to look around the issues that already exists and couldn't really find a duplicate. But of course if there is one, feel free to close this one.

Thanks for the great work on this!

[BenjaminWaye]

I made a fork to handle SVG here: https://github.com/BenjaminWaye/react-tinder-card

[BenjaminWaye]

Also a pull request here: #153