(5.x) preventDefaultTouchmoveEvent (Mobile Safari?)

[bhj]

Hi and thanks for all your work.

I can't seem to prevent vertical scrolling during a left/right swipe using preventDefaultTouchmoveEvent with 5.x where 4.x works fine (iOS 12.1.4, React 16.8.3). I'm using it with onSwipedLeft and onSwipedRight and everything else default. Seeing same behavior in the example actually; any ideas or anyone else experiencing this?

[hartzis]

Thank you for posting this issue. I'll try to allocate some time next week to dig into this, but off the top of my head it could be related to the checks here:

NOTE: THIS IS AN IOS/SAFARI ISSUE

More info below in other comments and PRs.

~Fixes~

• ~could add onSwiping={() => {}} prop to your <Swipeable> usage along with preventDefaultTouchmoveEvent and it should work.~

• ~could also try calling e.preventDefault() on the event within your code to.~

...

(btw the link to migrations.md in the readme and the "example migration" link in migrations.md are currently borked)

Thank you for pointing this out!

[JiiB]

I currently have the same issue 😞

[JiiB]

@bhj did you find a workaround?

[JiiB]

@bhj @hartzis I'm going to create a PR to fix this issue

[hartzis]

@JiiB what are your thoughts on an approach or we can just discuss when the PR is open.

[hartzis]

What we've discovered so far:

• only affecting safari from what i can tell
• appears related to v5's change to how it listens to touchmove events
  • v4 used to attach the touchmove listener directly to the element
  • attaches touchmove listener BEFORE the touchstart event started
    • this appears to be why it works in v4 - https://github.com/Shopify/draggable/pull/200
  • v5 attaches the touchmove listener to document now
  • attaches touchmove listener AFTER the touchstart event starts
• Attaching touchmove to document appears to work fine for chrome, though there are some events that throw warnings #128

Bug report(s) from around the web:

• probable related ios/safari issue - https://bugs.webkit.org/show_bug.cgi?id=182521
• https://github.com/timruffles/mobile-drag-drop/issues/124
• https://github.com/metafizzy/flickity/issues/740
• https://github.com/Shopify/draggable/issues/198

[hartzis]

Essentially the root issue - https://github.com/facebook/react/issues/2043

[hartzis]

@JiiB I think i got a better solution after a lot more digging in today.

Please let me know what you think of #131

Also published it as react-swipeable@5.1.0-alpha.1

[JiiB]

@hartzis @bhj react-swipeable@5.1.0-alpha.1 works for me. you can now call event.preventDefault() inside of your onSwiping handler 👍

[bhj]

@hartzis Alpha is working over here too. Thanks for digging into this!

[hartzis]

Thank you @JiiB and @bhj !

I genuinely appreciate you both for testing and verifying the alpha version.

[hartzis]

• found small bug with #131
• created fix #132
• published fix as react-swipeable@5.1.0-alpha.2

Still on target to release 5.1.0 this week.