OnClick and scrolling not working on touch on mobile browsers

[flogst]

The changes added in 3.0.40 remove the ability to handle onClick events on a React Canvas on mobile browsers. Scrolling on touch is also not working as expected.

To reproduce, I created two examples.

On version 3.0.39 everything is working as expected:
https://codesandbox.io/s/rive-react-canvas-3-0-39-hdlvx4?file=/src/App.js

On version 3.0.40, onClick and scrolling is not working on touch (you can test it using chrome dev tools with the device toolbar to simulate a touch screen device):
https://codesandbox.io/s/rive-react-canvas-3-0-40-ushr62?file=/src/App.js

I assume this is related to the touch and drag interactions? Is it possible to disable them for touch screens?

[zplata]

Ahh, sorry you ran into this! I'd recommend working off 3.0.39 for now then - we'll work on a patch for you to set a flag that allows you to opt out of the behind-the-scenes event listener attachments on the canvas (disabling all Rive listeners), as well as try and be smarter about attaching any event listeners at all if there are none configured on your state machine. Would that work for you?

[flogst]

That sounds perfect, thank you!

[zplata]

Hi @flogst - can you try on 4.0.46? You can pass in a shouldDisableRiveListeners: true as a parameter in the useRive params.

[flogst]

Hi @zplata, thanks for this. It does solve the scrolling issue, however we have one animation where we use a hover listener from Rive directly. So it's not possible to have both, the hover listener and being able to scroll if the animation is touched on a touchscreen?

[RyanMerabet]

+1

[limichange]

@flogst But this has the additional problem that there is no way to dynamically change this parameter. Very often, there is a need for interaction on the PC, but not on the phone. That means there needs to be a way to change the parameter directly, not just at initialization time.

[edogbeatz]

+1

[edogbeatz]

Wassup folks! are there any news on this?