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.

[gabrieljablonski]

Definitely not a pretty solution, but works for my use case, so sharing in case it might help someone with this "touch" issue on mobile.

gabrieljablonski@45966ca

In summary, I pass onClickSpotlight only when mobile user agent is detected, so the regular mouseOverSpotlight state handling is skipped, and we simply invoke the callback when "click" (or touch in this case) is detected inside the spotlight, which I then handle outside the react-joyride component.

Again, extremely hacky, and definitely not recommended, but might help as a workaround in some cases.

---

On a related note, I was investigating how intro.js solves this, and they inject a custom class on the target element (.introjs-showElement), which raises the zIndex of the target element above the overlay.

This hacky solution I came up with seemed a lot easier to implement, so I didn't try testing this idea from intro.js, but you might want to take a look at that @gilbarbara. It would require a significant rework of how the overlay currently works though.

[follan]

I ended up hiding Joyride for touch screens for now using if(window.matchMedia('(pointer: fine)').matches). Based on https://stackoverflow.com/a/52855084