diff --git a/CHANGELOG.md b/CHANGELOG.md index fb2dc33b3..e7668a06a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/). - Ensuring forced renders are batched so sibling `AnimatePresence` renders are triggered together. [Issue](https://github.com/framer/motion/issues/1358) - Viewport enter/leave event handlers are passed `IntersectionObserverEntry` or `null` if `IntersectionObserver` is not supported on the device. [Issue](https://github.com/framer/motion/issues/1364) +- No longer applying touch scroll-disabling styles if `dragListener` is set to `false`. [Issue](https://github.com/framer/motion/issues/1341) ## [5.3.1] 2021-11-19 diff --git a/src/motion/__tests__/ssr.test.tsx b/src/motion/__tests__/ssr.test.tsx index f7e9db742..3e8b248e6 100644 --- a/src/motion/__tests__/ssr.test.tsx +++ b/src/motion/__tests__/ssr.test.tsx @@ -137,6 +137,20 @@ function runTests(render: (components: any) => string) { ) }) + test("Reorder: Doesn't render touch-scroll disabling styles if dragListener === false", () => { + function Component() { + const [state, setState] = React.useState([0]) + return ( + + + + ) + } + const div = render() + + expect(div).toBe(``) + }) + test("Reorder: Renders provided element", () => { function Component() { const [state, setState] = React.useState([0]) diff --git a/src/render/html/use-props.ts b/src/render/html/use-props.ts index fffd549d6..bf576e122 100644 --- a/src/render/html/use-props.ts +++ b/src/render/html/use-props.ts @@ -70,13 +70,15 @@ export function useHTMLProps( const htmlProps: any = {} const style = useStyle(props, visualState, isStatic) - if (Boolean(props.drag)) { + if (Boolean(props.drag) && props.dragListener !== false) { // Disable the ghost element when a user drags htmlProps.draggable = false // Disable text selection - style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout = - "none" + style.userSelect = + style.WebkitUserSelect = + style.WebkitTouchCallout = + "none" // Disable scrolling on the draggable direction style.touchAction =