Fixing nested onClick (#3070)

motiondivision · Feb 19, 2025 · f56202f · f56202f
1 parent 7e30793
commit f56202f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/dev/html/public/playwright/gestures/press.html b/dev/html/public/playwright/gestures/press.html
@@ -9,6 +9,9 @@
                 width: 100px;
                 height: 100px;
                 background-color: #0077ff;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
 
             .box:focus-visible {
@@ -27,6 +30,9 @@
         <div tabindex="-1" class="box" id="press-no-tab-index-2">press</div>
         <input type="text" id="document-output" value="" />
         <input type="text" id="window-output" value="" />
+        <div class="box" id="press-div-nested">
+            <button id="press-click-button">click</button>
+        </div>
         <script type="module" src="/src/inc.js"></script>
         <script type="module">
             const { press } = window.MotionDOM
@@ -65,6 +71,18 @@
                 }
             })
 
+            press("#press-div-nested", (element) => {
+                return () => {
+                    element.style.backgroundColor = "red"
+                }
+            })
+
+            document
+                .getElementById("press-click-button")
+                .addEventListener("click", ({ currentTarget }) => {
+                    currentTarget.innerHTML = "clicked!"
+                })
+
             press(document, () => {
                 document.getElementById("document-output").value = "start"
                 return (_, { success }) => {

diff --git a/packages/motion-dom/src/gestures/press/index.ts b/packages/motion-dom/src/gestures/press/index.ts
@@ -51,16 +51,20 @@ export function press(
     )
 
     const startPress = (startEvent: PointerEvent) => {
+        const lockTarget = startEvent.target as Element
         const target = startEvent.currentTarget as Element
 
         if (!target || !isValidPressEvent(startEvent) || isPressing.has(target))
             return
 
         isPressing.add(target)
 
-        if (target.setPointerCapture && startEvent.pointerId !== undefined) {
+        if (
+            lockTarget.setPointerCapture &&
+            startEvent.pointerId !== undefined
+        ) {
             try {
-                target.setPointerCapture(startEvent.pointerId)
+                lockTarget.setPointerCapture(startEvent.pointerId)
             } catch (e) {}
         }
 
@@ -71,11 +75,11 @@ export function press(
             target.removeEventListener("pointercancel", onPointerCancel)
 
             if (
-                target.releasePointerCapture &&
+                lockTarget.releasePointerCapture &&
                 endEvent.pointerId !== undefined
             ) {
                 try {
-                    target.releasePointerCapture(endEvent.pointerId)
+                    lockTarget.releasePointerCapture(endEvent.pointerId)
                 } catch (e) {}
             }
 

diff --git a/tests/gestures/press.spec.ts b/tests/gestures/press.spec.ts
@@ -214,6 +214,17 @@ test.describe("press events", () => {
         await page.mouse.up()
         await expect(documentOutput).toHaveValue("cancel")
     })
+
+    test("nested click handlers", async ({ page }) => {
+        const button = page.locator("#press-click-button")
+        const box = await button.boundingBox()
+        if (!box) {
+            throw new Error("Button not found")
+        }
+        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+        await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2)
+        await expect(button).toHaveText("clicked!")
+    })
 })
 
 test.describe("press accessibility", () => {