search

FormidableLabs / react-swipeable

React swipe event handler hook
https://commerce.nearform.com/open-source/react-swipeable
MIT License
1.99k stars 146 forks source link

onSwipedRight is firing when clicking outside the swipeable area #304

Closed Sacret closed 2 years ago

Sacret commented 2 years ago

Describe the bug I have a swipeable area with the onSwipedLeft and onSwipedRight handlers. For some reason the onSwipedRight event is firing if I click outside this area.

Steps or Sandbox to reproduce

Steps to reproduce:

  1. Swipe the "swipe me" area
  2. Click the "click me" button, or the area above the "click me" button
  3. The onSwipedRight handler fires

Expected behavior onSwipedRight should not be firing if you click the button

Device/Browser Google Chrome 100.0.4896.88 (64-bit) (for desktop browser the bug is reproducing only in mobile device mode, for example iPhone XR) or Chrome for Android 98.0.4758.101; Android 10; Mi 9 Lite Build/QKQ1.190828.002

Additional context If you click on the swipeable area between step 1 and 2 the bug does not reproduce.

hartzis commented 2 years ago

@Sacret thank you very much for the issue and the example!

i am seeing the weirdness that you are describing and i am looking into it. If you have any ideas or thoughts please let me know.

I was about to release v7 tonight, but after looking at this and trying the v7 alpha and seeing the same issue i'm going to focus on uncovering what is happening. 🕵️

hartzis commented 2 years ago

@Sacret Okay this threw me through a bit of a loop, but after some exploration and strategically placed debugger's the issue arises when both trackTouch and trackMouse are utilized.

We are attaching the document eventlisteners even if the swipe was started as a touch. So after a touch swipe happens the mousemove and mouseup event listener's are still attached and fire when you click outside the swipeable target. This "triggers" a new swipe based on the previous swipes eventData 🤦 .

Now that i know what is happening there are a few solutions and clean ups we can do:

Thank you thank you again @Sacret ! 🎉

hartzis commented 2 years ago

@Sacret This will be fixed in v7 and is currently fixed and working correctly with v7.0.0-alpha.3.

Check out the updated sandbox example:

Sacret commented 2 years ago

@hartzis thank you as well for the explanation and fix. I really appreciate it!

hartzis commented 2 years ago

Fixed with v7.0.0 release