From 7015b5414774aa31b043e03745621719bb3afe5f Mon Sep 17 00:00:00 2001 From: Jonathan Beebe Date: Sun, 29 Mar 2026 10:51:23 -0500 Subject: [PATCH] fix: use drag threshold on card outer area to prevent accidental drags The outer div's onPointerDown was calling fireDragStart directly, bypassing the 4px movement threshold. Now uses startPendingDrag consistently for both the text button and outer card area. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/__tests__/Card.test.tsx | 13 +++++++++++++ src/components/Card.tsx | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/__tests__/Card.test.tsx b/src/__tests__/Card.test.tsx index 43dad8c..7d8c2cf 100644 --- a/src/__tests__/Card.test.tsx +++ b/src/__tests__/Card.test.tsx @@ -70,6 +70,19 @@ describe('Card', () => { }) }) + describe('drag threshold', () => { + it('does not fire onDragStart immediately when pointer-down on card outer area', () => { + const { container, props } = renderCard() + const card = container.firstElementChild as HTMLElement + + // Simulate pointerdown on the outer card div (padding area) + card.dispatchEvent(new PointerEvent('pointerdown', { button: 0, clientX: 50, clientY: 50, bubbles: true })) + + // onDragStart should NOT be called immediately — it should wait for threshold movement + expect(props.onDragStart).not.toHaveBeenCalled() + }) + }) + describe('dragging styles', () => { it('applies dragging styles when isDragging is true', () => { const { container } = renderCard({ isDragging: true }) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 461e5ec..7c5bc35 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -222,7 +222,7 @@ export default function Card({ onPointerDown={(e) => { if (e.button !== 0 || editing) return e.preventDefault() - fireDragStart(e.clientX, e.clientY) + startPendingDrag(e.clientX, e.clientY) }}> {editing ? (