yiekheng/cm_whatsapp_bot_v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): suppress native drag on SwipeableRow so anchors do not eat the swipe

Browse Source 
Reminders and activity rows wrap their card in Link, and anchors are
natively draggable. As soon as the operator moves horizontally the
browser kicks into drag-link mode and the pointer events never reach
SwipeableRow handlers — left/right swipe-to-Pause/Delete silently
broke on the reminders list.

Add onDragStart preventDefault + draggable=false to the row body once
and every SwipeableRow consumer is fixed in place. The existing pan-y
touch-action stays — together they give us pointer control on both
desktop and mobile.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yiekheng 2026-05-10 19:52:11 +08:00
parent a789b61e1f
commit b293bbf142
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/components/swipeable-row.tsx
View File

@ -150,6 +150,14 @@ export function SwipeableRow({
onPointerMove={handlePointerMove} onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp} onPointerUp={handlePointerUp}
onPointerCancel={handlePointerUp} onPointerCancel={handlePointerUp}
// Anchors (and <img>) are natively draggable. When children
// contain a <Link> wrapping the card, the browser hijacks the
// pointer for a "drag link" operation as soon as the user
// moves horizontally, so the swipe gesture never reaches our
// pointer handlers. Suppress native drag here once and the
// whole row body is unblocked.
onDragStart={(e) => e.preventDefault()}
draggable={false}
style={{ style={{
transform: `translateX(${offset}px)`, transform: `translateX(${offset}px)`,
transition: dragging ? "none" : "transform 200ms ease-out", transition: dragging ? "none" : "transform 200ms ease-out",