onSwipedRight is firing when clicking outside the swipeable area

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

• https://codesandbox.io/s/react-swipeable-bug-example-bllvn9?file=/src/index.js
• https://bllvn9.csb.app/

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.

[Sacret]

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

[hartzis]

@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.

• https://github.com/FormidableLabs/react-swipeable/blob/aeaacf2d95e13dfd4a65705c6961940de43f16ef/src/index.ts#L102-L103

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:

• clean up eventData after a swipe “ends”
• only attach mouse event listeners when the start event was a mouse event
• correctly clean up the mousemove and mouseup event listeners

Thank you thank you again @Sacret ! 🎉