Swiping through images in a gallery getting an error

[hchoriq]

Sorry - maybe all these errors are just me doing something wrong. But I set up a gallery and as I'm scrolling through the images, I get this error:

That's react-swipeable, not react-image-gallery, right? I just want to make sure I'm setting this up right before I ask a question elsewhere.

[xiaolin]

Do you get the same error on the example page http://linxtion.com/demo/react-image-gallery? If so, please list steps on how do to reproduce this.

[ekrokowski]

@xiaolin Yes, I get the same error on the example page. But i guess that needs to be fixed in react-swipeable.
The event should only be prevented if e.cancelable is true.

Reproduce:

1. Chrome Version: 71.0.3578.98
2. Responsive/Mobile emulation on
3. Swipe on image to next slide
4. The error triggers several times

[xiaolin]

Reopening.

[hartzis]

@xiaolin as the react-swipeable maintainer i'd like to carve out some time this week or next to see if I can get a PR to react-image-gallery to:

• update react-swipeable to v5
• include a fix for the "errors"
  • by only calling preventDefault when necassary
    • either within react-image-gallery using the event itself provided by react-swipeable
    • or the "error" might get fixed when fixing this issue: (5.x) preventDefaultTouchmoveEvent (Mobile Safari?) FormidableLabs/react-swipeable#127

A note these errors are more like warnings, since Calling preventDefault() for a non-cancelable event has no effect, MDN web docs - preventDefault#Notes

[xiaolin]

@hartzis That would be amazing!

If you're unable to get to it let me know and I'll try to allocate some time to update it.

[hartzis]

I think I may have grossly underestimated the complexity of this package and the time required. Just spent an hour and still having a hard time fully grasping react-swipeable's integration.

I will probably be unable to commit the time required to address this issue.

Thoughts:

• this warning is ultimately a deeper issue related to how react attaches its touchstart/touchmove event listeners to the document and not the containers themselves
  • Attach event per react container root, rather than on the document facebook/react#2043
• recommend removing the dependency on react-swipeable
  • this will allow you to attach the touch event listeners directly to the gallery's container.
    • example: Fix touch event issue casesandberg/react-color#594
    • if react-image-gallery just attached the touchstart and touchmove listeners to the galleries container, then this should allow the gallery the ability to call e.preventDefault() more appropriately
  • can easily copy whatever code from react-swipeable that is needed

Update:

• working on a [email protected] and it should have a fix for this via a new PR i just created - Preventdefault touch ios fix2 FormidableLabs/react-swipeable#131

[xiaolin]

Thanks for the update @hartzis, I have been wanting to remove the dependency for a bit now and this might be a good opportunity for me to do so. I'll take a look at removing the dependency or updating it whichever is best.

[HenrikeStahlhut]

@xiaolin Are there any updates regarding this problem? Because I've ran into the same issue now. When swiping on mobile in fullscreen, I get a ton of Unable to preventDefault inside passive event listener invocation erros at every swipe.

I haven't found a solution jet and I am also not sure if this is due to a problem with react-swipeable / react-image-library or my fault.

Any help would be greatly appreciated!