[pull] main from motiondivision:main

CHANGELOG.md

@@ -4,6 +4,12 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [12.30.1] 2026-02-03
+
+### Fixed
+
+-   Allow drag to be initiated by child `a` and `button` elements.
+
 ## [12.30.0] 2026-02-02
 
 ### Added

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/unit-conversion.ts"
+	yarn start-server-and-test "yarn dev-server" http://localhost:9991 "cd packages/framer-motion && cypress run --config-file=cypress.react.json --headed --spec cypress/integration/drag-nested.ts"
 
 lint: bootstrap
 	yarn lint

dev/html/package.json

@@ -1,7 +1,7 @@
 {
     "name": "html-env",
     "private": true,
-    "version": "12.30.0",
+    "version": "12.30.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -10,9 +10,9 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.30.0",
-        "motion": "^12.30.0",
-        "motion-dom": "^12.30.0",
+        "framer-motion": "^12.30.1",
+        "motion": "^12.30.1",
+        "motion-dom": "^12.30.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

dev/next/package.json

@@ -1,7 +1,7 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "12.30.0",
+    "version": "12.30.1",
     "type": "module",
     "scripts": {
         "dev": "next dev",
@@ -10,7 +10,7 @@
         "build": "next build"
     },
     "dependencies": {
-        "motion": "^12.30.0",
+        "motion": "^12.30.1",
         "next": "15.4.10",
         "react": "19.0.0",
         "react-dom": "19.0.0"

dev/react-19/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-19-env",
     "private": true,
-    "version": "12.30.0",
+    "version": "12.30.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,7 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "motion": "^12.30.0",
+        "motion": "^12.30.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },

dev/react/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "12.30.0",
+    "version": "12.30.1",
     "type": "module",
     "scripts": {
         "dev": "yarn vite",
@@ -11,7 +11,7 @@
         "preview": "yarn vite preview"
     },
     "dependencies": {
-        "framer-motion": "^12.30.0",
+        "framer-motion": "^12.30.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "12.30.0",
+  "version": "12.30.1",
   "packages": [
     "packages/*",
     "dev/*"

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

@@ -1,6 +1,11 @@
 /**
- * Tests for issue #1674: Interactive elements inside draggable elements should not trigger drag
- * https://github.com/motiondivision/motion/issues/1674
+ * Tests for drag behavior with interactive elements inside draggable elements.
+ *
+ * Form controls where text selection or direct interaction is expected
+ * (input, textarea, select, contenteditable) should NOT trigger drag.
+ *
+ * Buttons and links SHOULD allow drag since they don't have click-and-move
+ * actions of their own.
  */
 describe("Drag Input Propagation", () => {
     it("Should not drag when clicking and dragging on an input inside draggable", () => {
@@ -60,7 +65,7 @@ describe("Drag Input Propagation", () => {
         })
     })
 
-    it("Should not drag when clicking and dragging on a button inside draggable", () => {
+    it("Should drag when clicking and dragging on a button inside draggable", () => {
         cy.visit("?test=drag-input-propagation")
             .wait(200)
             .get("[data-testid='draggable']")
@@ -70,7 +75,7 @@ describe("Drag Input Propagation", () => {
                 expect(top).to.equal(100)
             })
 
-        // Attempt to drag by clicking on the button
+        // Drag by clicking on the button - buttons don't have click-and-move actions
         cy.get("[data-testid='button']")
             .trigger("pointerdown", 5, 5)
             .trigger("pointermove", 10, 10)
@@ -79,15 +84,16 @@ describe("Drag Input Propagation", () => {
             .wait(50)
             .trigger("pointerup", { force: true })
 
-        // Verify the draggable element did NOT move
+        // Verify the draggable element DID move
         cy.get("[data-testid='draggable']").should(($draggable) => {
             const { left, top } = $draggable[0].getBoundingClientRect()
-            expect(left).to.equal(100)
-            expect(top).to.equal(100)
+            // Element should have moved
+            expect(left).to.be.greaterThan(200)
+            expect(top).to.be.greaterThan(200)
         })
     })
 
-    it("Should not drag when clicking and dragging on a link inside draggable", () => {
+    it("Should drag when clicking and dragging on a link inside draggable", () => {
         cy.visit("?test=drag-input-propagation")
             .wait(200)
             .get("[data-testid='draggable']")
@@ -97,7 +103,7 @@ describe("Drag Input Propagation", () => {
                 expect(top).to.equal(100)
             })
 
-        // Attempt to drag by clicking on the link
+        // Drag by clicking on the link - links don't have click-and-move actions
         cy.get("[data-testid='link']")
             .trigger("pointerdown", 5, 5)
             .trigger("pointermove", 10, 10)
@@ -106,11 +112,12 @@ describe("Drag Input Propagation", () => {
             .wait(50)
             .trigger("pointerup", { force: true })
 
-        // Verify the draggable element did NOT move
+        // Verify the draggable element DID move
         cy.get("[data-testid='draggable']").should(($draggable) => {
             const { left, top } = $draggable[0].getBoundingClientRect()
-            expect(left).to.equal(100)
-            expect(top).to.equal(100)
+            // Element should have moved
+            expect(left).to.be.greaterThan(200)
+            expect(top).to.be.greaterThan(200)
         })
     })
 

packages/framer-motion/cypress/integration/drag-nested.ts

@@ -372,9 +372,9 @@ function testAlternateAxes(parentLayout: boolean, childLayout: boolean) {
         .wait(200)
         .get("#child")
         .trigger("pointerdown", 5, 5, { force: true })
-        .wait(50)
+        .wait(80)
         .trigger("pointermove", 10, 10, { force: true })
-        .wait(50)
+        .wait(80)
         .trigger("pointermove", 100, 100, { force: true })
         .wait(80)
         .should(([$child]: any) => {

packages/framer-motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "12.30.0",
+    "version": "12.30.1",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -88,7 +88,7 @@
         "measure": "rollup -c ./rollup.size.config.mjs"
     },
     "dependencies": {
-        "motion-dom": "^12.30.0",
+        "motion-dom": "^12.30.1",
         "motion-utils": "^12.29.2",
         "tslib": "^2.4.0"
     },

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

@@ -7,7 +7,7 @@ import {
     createBox,
     eachAxis,
     frame,
-    isElementKeyboardAccessible,
+    isElementTextInput,
     measurePageBox,
     mixNumber,
     PanInfo,
@@ -655,15 +655,17 @@ export class VisualElementDragControls {
                 const target = event.target as Element
 
                 /**
-                 * Only block drag if clicking on a keyboard-accessible child element.
-                 * If the draggable element itself is keyboard-accessible (e.g., motion.button),
-                 * dragging should still work when clicking directly on it.
+                 * Only block drag if clicking on a text input child element
+                 * (input, textarea, select, contenteditable) where users might
+                 * want to select text or interact with the control.
+                 *
+                 * Buttons and links don't block drag since they don't have
+                 * click-and-move actions of their own.
                  */
-                const isClickingKeyboardAccessibleChild =
-                    target !== element &&
-                    isElementKeyboardAccessible(target)
+                const isClickingTextInputChild =
+                    target !== element && isElementTextInput(target)
 
-                if (drag && dragListener && !isClickingKeyboardAccessibleChild) {
+                if (drag && dragListener && !isClickingTextInputChild) {
                     this.start(event)
                 }
             }