From a646a8a197d4c5bff4b832399b3ac6c4e6ea04bd Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Mon, 5 Jan 2026 18:08:47 +0100
Subject: [PATCH 1/5] Fix drag gesture triggering on interactive elements
 inside draggables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 CLAUDE.md                                     |  2 +
 .../src/tests/drag-input-propagation.tsx      | 48 ++++++++++
 .../integration/drag-input-propagation.ts     | 87 +++++++++++++++++++
 .../drag/VisualElementDragControls.ts         | 31 ++++++-
 4 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 dev/react/src/tests/drag-input-propagation.tsx
 create mode 100644 packages/framer-motion/cypress/integration/drag-input-propagation.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index a7987720b3..fe6d39bc11 100644
--- a/CLAUDE.md
+++ b/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
diff --git a/dev/react/src/tests/drag-input-propagation.tsx b/dev/react/src/tests/drag-input-propagation.tsx
new file mode 100644
index 0000000000..ec3d2396bd
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/packages/framer-motion/cypress/integration/drag-input-propagation.ts b/packages/framer-motion/cypress/integration/drag-input-propagation.ts
new file mode 100644
index 0000000000..f00c517519
--- /dev/null
+++ b/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)
+            })
+    })
+})
diff --git a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts b/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
index fbc004318b..53cc2c3780 100644
--- a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
+++ b/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
+}

From bdd34d844680befbf426c5a793659954a18db0ee Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Tue, 6 Jan 2026 10:21:57 +0100
Subject: [PATCH 2/5] Refactor drag to use shared isElementKeyboardAccessible
 utility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Consolidates interactive element detection logic between drag and press
gestures. Adds isContentEditable check to the shared utility.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../drag/VisualElementDragControls.ts         | 26 ++-----------------
 .../press/utils/is-keyboard-accessible.ts     |  3 ++-
 packages/motion-dom/src/index.ts              |  1 +
 3 files changed, 5 insertions(+), 25 deletions(-)

diff --git a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts b/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
index 53cc2c3780..a2f0b6aab3 100644
--- a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
+++ b/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
@@ -1,4 +1,5 @@
 import {
+    isElementKeyboardAccessible,
     PanInfo,
     ResolvedConstraints,
     Transition,
@@ -634,7 +635,7 @@ export class VisualElementDragControls {
                 if (
                     drag &&
                     dragListener &&
-                    !isInteractiveElement(event.target as Element)
+                    !isElementKeyboardAccessible(event.target as Element)
                 ) {
                     this.start(event)
                 }
@@ -762,26 +763,3 @@ 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
-}
diff --git a/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts b/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
index 1e38087085..bce4bf30c9 100644
--- a/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
+++ b/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
@@ -9,6 +9,7 @@ const focusableElements = new Set([
 export function isElementKeyboardAccessible(element: Element) {
     return (
         focusableElements.has(element.tagName) ||
-        (element as HTMLElement).tabIndex !== -1
+        (element as HTMLElement).tabIndex !== -1 ||
+        (element as HTMLElement).isContentEditable
     )
 }
diff --git a/packages/motion-dom/src/index.ts b/packages/motion-dom/src/index.ts
index a138e4c63f..571e450a9b 100644
--- a/packages/motion-dom/src/index.ts
+++ b/packages/motion-dom/src/index.ts
@@ -56,6 +56,7 @@ export * from "./gestures/hover"
 export * from "./gestures/pan/types"
 export * from "./gestures/press"
 export * from "./gestures/press/types"
+export * from "./gestures/press/utils/is-keyboard-accessible"
 export * from "./gestures/types"
 export * from "./gestures/utils/is-node-or-child"
 export * from "./gestures/utils/is-primary-pointer"

From ce45b6373f3de0a69f217ab687a6d1aea1098310 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Tue, 6 Jan 2026 10:45:43 +0100
Subject: [PATCH 3/5] Add E2E tests for interactive elements inside draggables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tests verify that drag gestures do not trigger when interacting with:
- Button
- Link (anchor)
- Select dropdown
- Checkbox inside label
- ContentEditable element

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/tests/drag-input-propagation.tsx      |  72 ++++++++-
 .../integration/drag-input-propagation.ts     | 141 +++++++++++++++++-
 2 files changed, 206 insertions(+), 7 deletions(-)

diff --git a/dev/react/src/tests/drag-input-propagation.tsx b/dev/react/src/tests/drag-input-propagation.tsx
index ec3d2396bd..61fb5e0f45 100644
--- a/dev/react/src/tests/drag-input-propagation.tsx
+++ b/dev/react/src/tests/drag-input-propagation.tsx
@@ -1,8 +1,8 @@
 import { motion } from "framer-motion"
 
 /**
- * Test page for issue #1674: Inputs inside draggable elements should not trigger drag
- * when clicked/interacted with.
+ * Test page for issue #1674: Interactive elements inside draggable elements
+ * should not trigger drag when clicked/interacted with.
  */
 export const App = () => {
     return (
@@ -14,13 +14,15 @@ export const App = () => {
                 dragElastic={0}
                 dragMomentum={false}
                 style={{
-                    width: 200,
-                    height: 100,
+                    width: 400,
+                    height: 200,
                     background: "red",
                     display: "flex",
+                    flexWrap: "wrap",
                     alignItems: "center",
                     justifyContent: "center",
                     gap: 10,
+                    padding: 10,
                 }}
             >
                 <input
@@ -42,6 +44,68 @@ export const App = () => {
                         padding: 5,
                     }}
                 />
+                <button
+                    data-testid="button"
+                    style={{
+                        width: 60,
+                        height: 30,
+                        padding: 5,
+                    }}
+                >
+                    Click
+                </button>
+                <a
+                    href="#test"
+                    data-testid="link"
+                    style={{
+                        display: "inline-block",
+                        width: 60,
+                        height: 30,
+                        padding: 5,
+                        background: "white",
+                    }}
+                >
+                    Link
+                </a>
+                <select
+                    data-testid="select"
+                    style={{
+                        width: 80,
+                        height: 30,
+                    }}
+                >
+                    <option value="1">Option 1</option>
+                    <option value="2">Option 2</option>
+                    <option value="3">Option 3</option>
+                </select>
+                <label
+                    data-testid="label"
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 5,
+                        background: "white",
+                        padding: 5,
+                    }}
+                >
+                    <input
+                        type="checkbox"
+                        data-testid="checkbox"
+                    />
+                    Check
+                </label>
+                <div
+                    contentEditable
+                    data-testid="contenteditable"
+                    style={{
+                        width: 80,
+                        height: 30,
+                        padding: 5,
+                        background: "white",
+                    }}
+                >
+                    Edit me
+                </div>
             </motion.div>
         </div>
     )
diff --git a/packages/framer-motion/cypress/integration/drag-input-propagation.ts b/packages/framer-motion/cypress/integration/drag-input-propagation.ts
index f00c517519..0fafbb74e3 100644
--- a/packages/framer-motion/cypress/integration/drag-input-propagation.ts
+++ b/packages/framer-motion/cypress/integration/drag-input-propagation.ts
@@ -1,5 +1,5 @@
 /**
- * Tests for issue #1674: Inputs inside draggable elements should not trigger drag
+ * Tests for issue #1674: Interactive elements inside draggable elements should not trigger drag
  * https://github.com/motiondivision/motion/issues/1674
  */
 describe("Drag Input Propagation", () => {
@@ -60,7 +60,7 @@ describe("Drag Input Propagation", () => {
         })
     })
 
-    it("Should still drag when clicking on the draggable area outside inputs", () => {
+    it("Should not drag when clicking and dragging on a button inside draggable", () => {
         cy.visit("?test=drag-input-propagation")
             .wait(200)
             .get("[data-testid='draggable']")
@@ -69,7 +69,142 @@ describe("Drag Input Propagation", () => {
                 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)
+
+        // Attempt to drag by clicking on the button
+        cy.get("[data-testid='button']")
+            .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()
+            expect(left).to.equal(100)
+            expect(top).to.equal(100)
+        })
+    })
+
+    it("Should not drag when clicking and dragging on a link 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 link
+        cy.get("[data-testid='link']")
+            .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()
+            expect(left).to.equal(100)
+            expect(top).to.equal(100)
+        })
+    })
+
+    it("Should not drag when clicking and dragging on a select 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 select
+        cy.get("[data-testid='select']")
+            .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()
+            expect(left).to.equal(100)
+            expect(top).to.equal(100)
+        })
+    })
+
+    it("Should not drag when clicking and dragging on a checkbox inside a label 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 checkbox (nested inside label)
+        cy.get("[data-testid='checkbox']")
+            .trigger("pointerdown", 2, 2)
+            .trigger("pointermove", 5, 5)
+            .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()
+            expect(left).to.equal(100)
+            expect(top).to.equal(100)
+        })
+    })
+
+    it("Should not drag when clicking and dragging on a contenteditable element 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 contenteditable element
+        cy.get("[data-testid='contenteditable']")
+            .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()
+            expect(left).to.equal(100)
+            expect(top).to.equal(100)
+        })
+    })
+
+    it("Should still drag when clicking on the draggable area outside interactive elements", () => {
+        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 interactive elements (at coordinates 5,5 which is top-left corner)
             .trigger("pointerdown", 5, 5)
             .trigger("pointermove", 10, 10)
             .wait(50)

From 12608b24d513f62d8075c2397b028c0ed8fcb998 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Wed, 7 Jan 2026 09:38:17 +0100
Subject: [PATCH 4/5] Update is-keyboard-accessible.ts

---
 .../src/gestures/press/utils/is-keyboard-accessible.ts         | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts b/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
index bce4bf30c9..1e38087085 100644
--- a/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
+++ b/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
@@ -9,7 +9,6 @@ const focusableElements = new Set([
 export function isElementKeyboardAccessible(element: Element) {
     return (
         focusableElements.has(element.tagName) ||
-        (element as HTMLElement).tabIndex !== -1 ||
-        (element as HTMLElement).isContentEditable
+        (element as HTMLElement).tabIndex !== -1
     )
 }

From f6712384828e125b8e1875ce6f775272492137b8 Mon Sep 17 00:00:00 2001
From: Matt Perry <mattgperry@gmail.com>
Date: Wed, 7 Jan 2026 11:38:26 +0100
Subject: [PATCH 5/5] Fix isElementKeyboardAccessible to not block drag on
 motion elements with onTap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous tabIndex !== -1 check was too broad - it blocked drag for any
element with tabIndex, including motion.div elements that automatically get
tabIndex=0 when onTap is set. Now only blocks drag for actual interactive
form elements (INPUT, TEXTAREA, SELECT, BUTTON, A) and contentEditable.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 Makefile                                           |  2 +-
 .../gestures/press/utils/is-keyboard-accessible.ts | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/Makefile b/Makefile
index f452197a3d..77ab96dc63 100644
--- a/Makefile
+++ b/Makefile
@@ -95,7 +95,7 @@ test-e2e: test-nextjs test-html test-react test-react-19
 	yarn test-playwright
 
 test-single: build test-mkdir
-	yarn start-server-and-test "yarn dev-server" http://localhost:9991 "cd packages/framer-motion && cypress run --config-file=cypress.react-19.json --headed --spec cypress/integration/layout-group.ts"
+	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headed --spec cypress/integration/drag-input-propagation.ts"
 
 lint: bootstrap
 	yarn lint
diff --git a/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts b/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
index 1e38087085..a22b9be82d 100644
--- a/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
+++ b/packages/motion-dom/src/gestures/press/utils/is-keyboard-accessible.ts
@@ -1,4 +1,4 @@
-const focusableElements = new Set([
+const interactiveElements = new Set([
     "BUTTON",
     "INPUT",
     "SELECT",
@@ -6,9 +6,17 @@ const focusableElements = new Set([
     "A",
 ])
 
+/**
+ * Checks if an element is an interactive form element that should prevent
+ * drag gestures from starting when clicked.
+ *
+ * This specifically targets form controls, buttons, and links - not just any
+ * element with tabIndex, since motion elements with tap handlers automatically
+ * get tabIndex=0 for keyboard accessibility.
+ */
 export function isElementKeyboardAccessible(element: Element) {
     return (
-        focusableElements.has(element.tagName) ||
-        (element as HTMLElement).tabIndex !== -1
+        interactiveElements.has(element.tagName) ||
+        (element as HTMLElement).isContentEditable === true
     )
 }