Problems with touch devices.

[fjavierv]

Hi, first of all thanks for this project.

After that, I have problem using your library with touch devices (phones, tables, ...) and I think that it is about this line:

react-joyride/src/components/Overlay.js

Line 199 in 88853fe

pointerEvents: mouseOverSpotlight ? 'none' : 'auto',

Because mouseOverSpotlight won't be true in touch devices, right?

You can test for you self in Controlled Demo using some touch devices, You will see how you need to press twice in order to follow the tutorial.

[ben-obringer]

I'm experiencing the same issue. Has anybody found a work around for this?

[gilbarbara]

This is working as expected now. They probably fixed it upstream.
Tested on Safari and Chrome mobile on an iPhone.

[SanjayTml]

It works on browsers in iPhone but not in Android. Tested in different android devices with chrome. @gilbarbara

[zvandehy]

@gilbarbara Do you have any idea of what the issue is? How can I help or is there an estimated time for when this issue will be resolved?

[gilbarbara]

Hey @zvandehy
Yeah, the overlay needs to switch the pointer-events property between auto | none when the cursor enters/leaves the spotlight area so the content behind it is usable. It can't always use' none' because the overlay needs to be clickable, and changing the property on click doesn't work either.
I've tried to fix it before but couldn't find a solution.