fix: prevent stop or pause when drag constraints

dev/react/src/tests/drag-ref-constraints.tsx

@@ -8,6 +8,7 @@ export const App = () => {
     const [dragging, setDragging] = useState(false)
     const params = new URLSearchParams(window.location.search)
     const layout = params.get("layout") || undefined
+    const elastic = Number(params.get("elastic")) || 0
 
     // We do this to test when scroll position isn't 0/0
     useLayoutEffect(() => {
@@ -27,7 +28,7 @@ export const App = () => {
                         id="box"
                         data-testid="draggable"
                         drag
-                        dragElastic={0}
+                        dragElastic={elastic}
                         dragMomentum={false}
                         style={{
                             width: 50,

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

@@ -228,6 +228,27 @@ describe("Drag", () => {
             })
     })
 
+    it("reset drag constraints (ref-based), when click after dragging", () => {
+        cy.visit("?test=drag-ref-constraints&elastic=1")
+            .wait(200)
+            .get("[data-testid='draggable']")
+            .trigger("pointerdown", 10, 10)
+            .wait(200)
+            .trigger("pointermove", 300, 300, { force: true })
+            .wait(200)
+            .trigger("pointerup", { force: true })
+            .trigger("pointerdown", { force: true })
+            .trigger("pointerup", { force: true })
+            .wait(1000)
+            .should(($draggable: any) => {
+                const draggable = $draggable[0] as HTMLDivElement
+                const { left, top } = draggable.getBoundingClientRect()
+
+                expect(left).to.equal(150)
+                expect(top).to.equal(150)
+            })
+    })
+
     it("doesn't reset drag constraints (ref-based), while dragging, on unrelated parent component updates", () => {
         cy.visit("?test=drag-ref-constraints")
             .wait(200)
@@ -242,8 +263,8 @@ describe("Drag", () => {
                 const draggable = $draggable[0] as HTMLDivElement
                 const { left, top } = draggable.getBoundingClientRect()
 
-                expect(left).to.equal(150)
-                expect(top).to.equal(150)
+                expect(left).to.equal(200)
+                expect(top).to.equal(200)
             })
     })
 

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

@@ -96,11 +96,13 @@ export class VisualElementDragControls {
         if (presenceContext && presenceContext.isPresent === false) return
 
         const onSessionStart = (event: PointerEvent) => {
-            const { dragSnapToOrigin } = this.getProps()
+            const { dragSnapToOrigin, dragConstraints } = this.getProps()
 
-            // Stop or pause any animations on both axis values immediately. This allows the user to throw and catch
-            // the component.
-            dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation()
+            // Stop or pause any animations on both axis values immediately when not using dragConstraints.
+            // This allows the user to throw and catch the component.
+            if (!dragConstraints) {
+                dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation()
+            }
 
             if (snapToCursor) {
                 this.snapToCursor(extractEventInfo(event, "page").point)