javascriptreactjsreact-nativeframerjsframer-motion

How do you get React Framer-motion to fire onClick events for mobiles when using the drag prop?

I'm currently using the React library Framer Motion to help animate some of the gestures I want in my App. I seem to be having an issue with the "drag" property for the "motion.div" tag.

e.g.

<motion.div drag>
  <button onClick={this.eventHandler}>
    Framer Motion Click me
  </button>
</motion.div>

I've replicated the problem I'm having here: https://codesandbox.io/embed/frosty-frog-xr2jj

The onClick works perfectly fine on laptops/google dev tools, however when using a mobile/iOS device, the drag property for <motion.div> seems to be preventing the onClick event.

You can see this if you check out this sandbox. The button will work perfectly fine in the sandbox on a laptop/desktop device but if you try it on your mobile, you'll run into the issue

Is this just me doing something wrong or is anyone else experiencing this bug?

Any help will be greatly appreciated!

Solution

  • This was a bug in the library. It's fixed now if you upgrade to framer-motion@1.6.8.