Swiping through images in a gallery getting an error

[AndreyKuleb]

Describe the bug
I use a react-image-gallery, that use react-swipeable. When i am swiping gallery, an error in console appears (see image). There are the same bug1 and bug2 reports in react-image-gallery.

Expected behavior
In bug1 a decision was offered

** Device/Browser **
MacBook Pro (Retina, 15-inch, Mid 2015)
MacOS Mojave 10.14.11
Google Chrome ver 72.0.3626.119

Additional context

[hartzis]

@AndreyKuleb thanks for creating the issue.

• Appears to be related to v4 react-swipeable and i have made a PR to that repo before to update the version.
• I think the best approach may be for react-image-gallery to call e.preventDefault() itself when it deems it appropriate
  • also possibly update to v5 😸

I may be able to work on a PR for the above sometime over the next couple of weeks, but feel free to attempt if you'd like.

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

[13806]

Can confirm this appears when { preventDefaultTouchmoveEvent: true } in v5

[hartzis]

@13806 is your issue also related to https://github.com/xiaolin/react-image-gallery ?

We just released 5.1.0 that also addressed this issue a bit mainly for safari browsers, but should have helped with this warning.

[13806]

@hartzis no, I'm using it standalone. Simply passing handlers into a div, like so:

  const handlers = useSwipeable({
    preventDefaultTouchmoveEvent: true,
    onSwiping: handleSwiping
    // ...
  })

 <div
     {...{
         ...handlers,
     }}
 >
     // ...
  </div>

When setting preventDefaultTouchmoveEvent to false, error does not occur.

edit:
Updated to 5.1.0, the error went away but now touch stopped working, will investigate further...

[hartzis]

@13806 sorry to hear the 5.1.0 update broke touch.

It may be related to the new ref prop in the handlers object, https://github.com/dogfessional/react-swipeable#hook-details

In 5.1.0, we added a ref to the useSwipeable handlers and maybe you have another ref you're attaching to your div?

If you are also attaching a ref to the dom node that ...handlers is being spread on you can update it like this:

function SwipeableUsingHook(props) {
  const handlers = useSwipeable(props)
  // your custom use for ref
  const customRef = ( el ) => {
    handlers.ref(el); // call the hanlders ref for useSwipeable to work correctly
    // do whatever custom stuff you need with el
    // ...
  }
  return (
    <div {...handlers} ref={customRef}>
      // ...
    </div>
  )
}

[13806]

@13806 yes that seems to be it, I'm passing refs. However, your solution won't work for me since the main component needs to be able to take ref externally as a prop (and that other component passing down the ref doesn't know what handlers the useSwipeable main component would need, so I can't define handlers there). I wonder if there's a workaround.

[hartzis]

@13806 I'm really curious about how you're using useSwipeable and would love to help if I can.

Any way you can either post some code or create a codesandbox.io example?