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

stopPropagation to prevent parent swipe #46

Closed
MikeLP opened this issue Aug 16, 2016 · 9 comments
Closed

stopPropagation to prevent parent swipe #46

MikeLP opened this issue Aug 16, 2016 · 9 comments

Comments

@MikeLP
Copy link

MikeLP commented Aug 16, 2016

Please add ability to call stopPropagation by props flag.

@MikeLP
Copy link
Author

MikeLP commented Aug 16, 2016

example
<Swipeable stopPropagation={true} ></Swipeable>

In src:
stopPropagation: React.PropTypes.bool

and

touchStart: function(e) {
  if (this.props.stopPropagation) {
    e.stopPropagation()
  }

  ...
}

@hartzis
Copy link
Collaborator

hartzis commented Aug 17, 2016

@MikeLP Are you looking to have this like react-tappable stopPropagation property?

So it is run on onTouchStart, onTouchMove, and onTouchEnd?

@MikeLP
Copy link
Author

MikeLP commented Aug 18, 2016

@hartzis Right. In my case I have swipeable "switch" component in swipeable sidebar. So when I try to swipe a "switch" - sidebar will be swiped too. So one of solutions it will be stopPropagation property. If you see another way to resolve this issue, it doesn't matter for me. Unfortunately for now I forced to manually change yours component and use separatly in my project instead of npm. It will be nice to have fast fix of this issue and rollback to npm.

P.S. Another case - implement the stopPropagation method call from any onSwipe callback.

@hartzis
Copy link
Collaborator

hartzis commented Aug 19, 2016

@MikeLP added via #47, and published to npm as 3.6.0

@hartzis hartzis closed this as completed Aug 19, 2016
@MikeLP
Copy link
Author

MikeLP commented Aug 22, 2016

Thanks.

@oleksandr-danylchenko
Copy link

This option was deleted? How it can be emulated now?

@hartzis
Copy link
Collaborator

hartzis commented Sep 7, 2020

@oleksandr-danylchenko yeah, in v5 we removed stopPropagation.

In the migration docs we mention that you can call e. stopPropagation() when you need to via the onSwiping/Swiped callbacks.

https://github.com/FormidableLabs/react-swipeable/blob/master/migration.md#stoppropagation

Example:

const onSwiping = ( { event } ) => {
  event.stopPropagation();
}
const handlers = useSwipeable({ onSwiping })
return (<div {...handlers}> You can swipe here </div>)

@mauricioross
Copy link

Hello! When I try to scroll a Dropdown inside the element that contains the swipe handlers, it executes its actions, how can I stop it? Thanks for your time!

PS: i try stopPropagation(). but is the same.

@hartzis
Copy link
Collaborator

hartzis commented Mar 19, 2021

@mauricioross Howdy. Without an example to work with i can only guess, but my best guess would be to try adding an onClick and/or onTouchStart/onTouchMove handlers to your Dropdown and call e.preventDefault ? 🤷 hopefully the event stops bubbling and doesn't get to the swipe handlers?

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

4 participants