-
Notifications
You must be signed in to change notification settings - Fork 307
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
Prevent Default Behavior of Gesture (Back Navigation on Mobile) #1
Comments
@mjsisley i think i got some console warnings in chrome, didn't they change the way events worked? I'm a bit out of the loop, do you know what would be the right way to do it? Would you go for an option, or use a reasonable default. |
I am having a similar issue with Chrome reloading the page when I swipe down. Having the ability to stopPropagation/preventDefault is a must 🤳 At first I tried using // proposal A
// send `event` as extra argument in `onAction`
useGesture({ onAction: (props, event) => event.preventDefault() })
// proposal B
// provide exclusive handler for `event`
useGesture({ onEvent: event => event.preventDefault() }) |
Makes sense, the event is now included in 3.0.3. I've switched it to passive mode, though, so in order to be able to do e.preventDefault it would be something like this:
|
@drcmda Is it possible to preventDefault in render props pattern? I don't quite understand transient mode, how are things different in transient mode will something like below work ? Getting |
Yeah, I noticed, there’s no way currently to pass props. I think it would be a breaking change at least for the HOC. Should we do it? |
Seems yes from my side.I am facing the same issue that Victor mentioned i.e the browser refreshing the page on swiping down.Hopefully the breaking change you mentioned won't cause issues somewhere else or do they (I don't have the whole picture)? |
thanks for the great and quick work, @drcmda! I think the code you posted above contains some imprecisions. Wouldn't the correct way be as below? useGesture({ transient: true, onAction: props => props.event.preventDefault(), passive: {passive: false} }) If my understanding of the code is correct we are sending the prop useGesture({ transient: true, onAction: props => props.event.preventDefault(), options: {passive: false} }) |
I've made a rough draft here, it fulfils all options and does some extras (like calculating directions, velocity, local deltas, etc.) https://codesandbox.io/embed/n10mvnxmmm You can exchange the demos in the render function (Drag/Pull/Decay)
If you have additional ideas or comments about the new api, please go ahead, i'm all ears. @zvictor in the draft above it's similar to your PR. Though transient is out, onAction is enough to signal transient mode i guess. and passive is an option itself. can take these props as they are, and withGesture now wants options first and then the component. useGesture(eventHandler) is shortform for useGesture({ onAction, passive, etc }) |
Released it today: https://twitter.com/0xca0a/status/1081185260208078849 |
On mobile browsers (at least on iOS: Safari, Chrome), I'm getting the default behavior of a swipe to the left triggering a back navigation (along with the gesture provided with this library). It would be great if this library exposed a way to prevent that default behavior.
I see you removed
preventDefault
on the last release, I'm not sure what the issue was... but it would be great if there was some way to configure this (I'm not seeing one atm).The text was updated successfully, but these errors were encountered: