rive-react icon indicating copy to clipboard operation
rive-react copied to clipboard

Mobile scroll and event listener

Open infinity-atom42 opened this issue 2 years ago • 2 comments

This is the same problem as https://github.com/rive-app/rive-react/issues/229

When you make a Rive component that is interactive it disables the ability to scroll This is definitely because of a touch event listener combined with a preventDefault that stops it from scrolling

Ideal solution would be: Instead of preventDefault when you touch the screen, maybe you can check if it is necesarry. When touching an area in the canvas that has no triggers, just don't disable scroll. And for the cases where this would be ideal, just add a stopScrollOnTouch: as prop

For now, I just disabled the event listeners and added my own events until this problem is fixed

infinity-atom42 avatar Mar 04 '24 02:03 infinity-atom42

Steps to solve the bug cause canvas_advanced_single.mjs is not public and i really hope it gets solved:

  1. There is StateMachineInstance class in canvas_advanced_single.mjs. You need to either change pointerDown() to return an object or create a functions that confirms touching something intractable. (check_interactive()for example)
  2. On line 149 where it checks if "mousedown"/"touchstart", add the new function and if it is interactive, set event.preventDefault()
  3. Remove event.preventDefault() from registerTouchInteractions.ts line 32

Done!

infinity-atom42 avatar Mar 04 '24 03:03 infinity-atom42

Can we get this resolved? Pretty huge issue, basically breaks our website on mobile :(

OskarGroth avatar Apr 08 '25 10:04 OskarGroth