Fix drag gesture triggering on interactive elements inside draggables

Prevents drag from starting when clicking on input, textarea, select,
button, anchor, or contenteditable elements inside a draggable component.
This allows normal interaction with form elements (focus, text selection)
without triggering the parent's drag gesture.

Fixes #1674

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: mattgperry

CLAUDE.md

@@ -73,6 +73,8 @@ motion (public API)
 
 ## Writing Tests
 
+**IMPORTANT: Always write a failing test FIRST before implementing any bug fix or feature.** This ensures the issue is reproducible and the fix is verified. For UI interaction bugs (like gesture handling), prefer E2E tests using Playwright or Cypress.
+
 When waiting for the next frame in async tests:
 
 ```javascript

dev/react/src/tests/drag-input-propagation.tsx

@@ -0,0 +1,48 @@
+import { motion } from "framer-motion"
+
+/**
+ * Test page for issue #1674: Inputs inside draggable elements should not trigger drag
+ * when clicked/interacted with.
+ */
+export const App = () => {
+    return (
+        <div style={{ padding: 100 }}>
+            <motion.div
+                id="draggable"
+                data-testid="draggable"
+                drag
+                dragElastic={0}
+                dragMomentum={false}
+                style={{
+                    width: 200,
+                    height: 100,
+                    background: "red",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 10,
+                }}
+            >
+                <input
+                    type="text"
+                    data-testid="input"
+                    defaultValue="Select me"
+                    style={{
+                        width: 80,
+                        height: 30,
+                        padding: 5,
+                    }}
+                />
+                <textarea
+                    data-testid="textarea"
+                    defaultValue="Text"
+                    style={{
+                        width: 60,
+                        height: 30,
+                        padding: 5,
+                    }}
+                />
+            </motion.div>
+        </div>
+    )
+}

packages/framer-motion/cypress/integration/drag-input-propagation.ts

@@ -0,0 +1,87 @@
+/**
+ * Tests for issue #1674: Inputs inside draggable elements should not trigger drag
+ * https://github.com/motiondivision/motion/issues/1674
+ */
+describe("Drag Input Propagation", () => {
+    it("Should not drag when clicking and dragging on an input inside draggable", () => {
+        cy.visit("?test=drag-input-propagation")
+            .wait(200)
+            .get("[data-testid='draggable']")
+            .should(($draggable) => {
+                const { left, top } = $draggable[0].getBoundingClientRect()
+                // Initial position is at padding: 100
+                expect(left).to.equal(100)
+                expect(top).to.equal(100)
+            })
+
+        // Attempt to drag by clicking on the input
+        cy.get("[data-testid='input']")
+            .trigger("pointerdown", 5, 5)
+            .trigger("pointermove", 10, 10)
+            .wait(50)
+            .trigger("pointermove", 200, 200, { force: true })
+            .wait(50)
+            .trigger("pointerup", { force: true })
+
+        // Verify the draggable element did NOT move
+        cy.get("[data-testid='draggable']").should(($draggable) => {
+            const { left, top } = $draggable[0].getBoundingClientRect()
+            // Element should still be at its initial position
+            expect(left).to.equal(100)
+            expect(top).to.equal(100)
+        })
+    })
+
+    it("Should not drag when clicking and dragging on a textarea inside draggable", () => {
+        cy.visit("?test=drag-input-propagation")
+            .wait(200)
+            .get("[data-testid='draggable']")
+            .should(($draggable) => {
+                const { left, top } = $draggable[0].getBoundingClientRect()
+                expect(left).to.equal(100)
+                expect(top).to.equal(100)
+            })
+
+        // Attempt to drag by clicking on the textarea
+        cy.get("[data-testid='textarea']")
+            .trigger("pointerdown", 5, 5)
+            .trigger("pointermove", 10, 10)
+            .wait(50)
+            .trigger("pointermove", 200, 200, { force: true })
+            .wait(50)
+            .trigger("pointerup", { force: true })
+
+        // Verify the draggable element did NOT move
+        cy.get("[data-testid='draggable']").should(($draggable) => {
+            const { left, top } = $draggable[0].getBoundingClientRect()
+            // Element should still be at its initial position
+            expect(left).to.equal(100)
+            expect(top).to.equal(100)
+        })
+    })
+
+    it("Should still drag when clicking on the draggable area outside inputs", () => {
+        cy.visit("?test=drag-input-propagation")
+            .wait(200)
+            .get("[data-testid='draggable']")
+            .should(($draggable) => {
+                const { left, top } = $draggable[0].getBoundingClientRect()
+                expect(left).to.equal(100)
+                expect(top).to.equal(100)
+            })
+            // Click on edge of draggable, not on inputs (at coordinates 5,5 which is top-left corner)
+            .trigger("pointerdown", 5, 5)
+            .trigger("pointermove", 10, 10)
+            .wait(50)
+            .trigger("pointermove", 200, 200, { force: true })
+            .wait(50)
+            .trigger("pointerup", { force: true })
+            .should(($draggable) => {
+                const { left, top } = $draggable[0].getBoundingClientRect()
+                // Element should have moved - the exact position depends on gesture calculation
+                // but should NOT be at original position of 100,100
+                expect(left).to.be.greaterThan(200)
+                expect(top).to.be.greaterThan(200)
+            })
+    })
+})

packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts

@@ -631,7 +631,13 @@ export class VisualElementDragControls {
             "pointerdown",
             (event) => {
                 const { drag, dragListener = true } = this.getProps()
-                drag && dragListener && this.start(event)
+                if (
+                    drag &&
+                    dragListener &&
+                    !isInteractiveElement(event.target as Element)
+                ) {
+                    this.start(event)
+                }
             }
         )
 
@@ -756,3 +762,26 @@ export function expectsResolvedDragConstraints({
 }: MotionProps) {
     return isRefObject(dragConstraints) && !!onMeasureDragConstraints
 }
+
+/**
+ * Check if an element is an interactive form element that should
+ * prevent drag from starting when clicked.
+ */
+const interactiveElements = new Set([
+    "INPUT",
+    "TEXTAREA",
+    "SELECT",
+    "BUTTON",
+    "A",
+])
+
+function isInteractiveElement(element: Element | null): boolean {
+    if (!element) return false
+    if (
+        interactiveElements.has(element.tagName) ||
+        (element as HTMLElement).isContentEditable
+    ) {
+        return true
+    }
+    return false
+}