Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onSwipedRight is firing when clicking outside the swipeable area #304

Closed
Sacret opened this issue Apr 14, 2022 · 5 comments
Closed

onSwipedRight is firing when clicking outside the swipeable area #304

Sacret opened this issue Apr 14, 2022 · 5 comments
Assignees

Comments

@Sacret
Copy link

Sacret commented Apr 14, 2022

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
Copy link
Collaborator

hartzis commented Apr 21, 2022

@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
Copy link
Collaborator

hartzis commented Apr 21, 2022

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

  • 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 ! 🎉

@hartzis
Copy link
Collaborator

hartzis commented Apr 21, 2022

@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
Copy link
Author

Sacret commented Apr 21, 2022

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

hartzis added a commit that referenced this issue Apr 21, 2022
@hartzis hartzis mentioned this issue Apr 26, 2022
Merged
10 tasks
@hartzis hartzis self-assigned this Apr 27, 2022
hartzis added a commit that referenced this issue Apr 27, 2022
* Replace microbundle with rollup (#273)

* Prevent scroll prop (#240)

* update changelog with callouts

* update format, fix lint config issue, update contributing

* set ts output target to es2015, update changelog

* add comments to types for more info (#293)

* setup touchEventOptions prop (#290)

* setup touchEventOptions prop

* add onTouchStartOrOnMouseDown prop and test

* add onTouchEndOrOnMouseUp callback

* Feature swipeDuration (#291)

* update docs and migration

* 7.0.0-alpha.0

* update deps, add react 18 peer

* 7.0.0-alpha.1

* update examples to use react 18

* update deps, update LICENSE dates

* update readme, types, example types

* export/outputs housekeeping and cleaning

* 7.0.0-alpha.2

* fix issue #304

* 7.0.0-alpha.3

* bump deps

Co-authored-by: Binoy <me@binoy.io>
Co-authored-by: Stefan Huynh <stefan.huynh@formidable.com>
Co-authored-by: Brian Emil Hartz <brianhartz@gmail.com>
@hartzis
Copy link
Collaborator

hartzis commented Apr 27, 2022

Fixed with v7.0.0 release

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants