Removing touch scroll disabling styles if dragListener is false

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
 

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 (
+                <Reorder.Group onReorder={setState} values={state}>
+                    <Reorder.Item value="a" dragListener={false} />
+                </Reorder.Group>
+            )
+        }
+        const div = render(<Component />)
+
+        expect(div).toBe(`<ul><li style="z-index:0;transform:none"></li></ul>`)
+    })
+
     test("Reorder: Renders provided element", () => {
         function Component() {
             const [state, setState] = React.useState([0])

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 =