search

gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.8k stars 525 forks source link

Problems with touch devices. #861

Open fjavierv opened 1 year ago

fjavierv commented 1 year ago

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:

https://github.com/gilbarbara/react-joyride/blob/88853fea5d5940ae5e71dc81681406102dceef50/src/components/Overlay.js#L199

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 commented 1 year ago

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

gilbarbara commented 1 year ago

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

SanjayTml commented 1 year ago

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

zvandehy commented 6 months ago

@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 commented 6 months ago

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 commented 2 weeks ago

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.

https://github.com/gabrieljablonski/react-joyride/commit/45966cadb918ba8a1312fdfa79e3832d11bfa406

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.