Skip to content

fix(drawer): suppress trailing click after a drag gesture#1654

Open
te6-in wants to merge 2 commits into
devfrom
fix/drawer-suppress-click-after-drag
Open

fix(drawer): suppress trailing click after a drag gesture#1654
te6-in wants to merge 2 commits into
devfrom
fix/drawer-suppress-click-after-drag

Conversation

@te6-in

@te6-in te6-in commented Jun 9, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

As-is

ScreenRecording_06-09-2026.18-50-47_1.mov

To-be

ScreenRecording_06-09-2026.19-19-31_1.mov

Summary by CodeRabbit

  • Bug Fixes

    • 드로어의 스와이프/드래그 제스처 처리 개선 — 드래그 직후에 발생하는 의도치 않은 클릭을 억제하여 터치/마우스 환경에서 제스처 인식이 더 안정적으로 동작합니다.

  • Tests

    • 제스처 임계값 기반 클릭 억제와 탭/드래그 후 상태 리셋 동작을 검증하는 테스트가 추가되었습니다.

@te6-in @claude
fix(drawer): suppress trailing click after a drag gesture
12947e6 
Dragging the sheet from an interactive child (e.g. a swipe-to-dismiss
begun on a menu item) would still fire that child's click on release —
iOS in particular synthesizes a click on the origin element even after a
clear drag. Track when a gesture passes the swipe-start threshold and
swallow the following click in capture phase; a plain tap is unaffected.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 8ea09a0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai

coderabbitai Bot commented Jun 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 17652e1b-0ce6-4267-ad9f-7070e193822b

📥 Commits

Reviewing files that changed from the base of the PR and between 12947e6 and 8ea09a0.

📒 Files selected for processing (1)
  • packages/react-headless/drawer/src/Drawer.test.tsx
📝 Walkthrough

Walkthrough

DrawerContent에 draggedRef를 추가해 포인터 이벤트에서 드래그 상태를 관리하고, 스와이프 임계값을 넘는 드래그 뒤 발생하는 클릭을 캡처 단계에서 차단하며 해당 동작을 검증하는 테스트를 추가합니다.

변경사항

DrawerContent 드래그 제스처 처리

Layer / File(s) Summary
드래그 상태 추적 및 초기화
packages/react-headless/drawer/src/Drawer.tsx		 draggedRef를 선언하고 pointerdown에서 draggedRef.current = false로 초기화하여 이전 제스처 상태가 다음 제스처에 영향을 주지 않도록 합니다.
포인터 이동 중 드래그 감지
packages/react-headless/drawer/src/Drawer.tsx		 pointermove에서 isBeyondThreshold를 계산해 스와이프 시작 임계값 초과 여부를 판정하고, 초과 시 draggedRef.current = true로 설정하며 onDrag 호출 분기를 정리합니다.
클릭 캡처로 드래그 후 클릭 억제
packages/react-headless/drawer/src/Drawer.tsx		 onClickCapture 핸들러에서 draggedRef.current가 true일 때 preventDefault/stopPropagation으로 클릭을 차단하고 draggedRef를 리셋합니다.
테스트 유틸/환경 시드
packages/react-headless/drawer/src/Drawer.test.tsx		 PointerEvent 좌표 주입(firePointer), getBoundingClientRect 고정, content.style.transform 시드 등을 추가해 테스트 환경을 안정화합니다.
포인터 캡처 mock 제어
packages/react-headless/drawer/src/Drawer.test.tsx		 setPointerCapture를 mock/복원해 테스트에서 포인터 캡처 동작을 제어합니다.
임계값 기반 클릭 억제 시나리오
packages/react-headless/drawer/src/Drawer.test.tsx		 임계값 초과 시 클릭 억제, 임계값 미만 탭 통과, 드래그 후 다음 제스처에서 상태 리셋 및 클릭 통과의 3개 시나리오를 검증합니다.

예상 코드 리뷰 난이도

🎯 3 (Moderate) | ⏱️ ~20 minutes

마음으로부터의 시

🐰 바람에 실린 드래그,
불필요한 클릭은 살며시 막고,
포인터는 깔끔히 제자리를 찾아,
다음 탭은 또렷이 통과하네,
작은 발자국이 큰 안정이 되어.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목이 변경 사항의 주요 목적을 명확하게 설명하고 있습니다. 'fix(drawer): suppress trailing click after a drag gesture'는 드로어 컴포넌트에서 드래그 후 뒤따르는 클릭을 억제하는 버그 수정을 정확하게 표현합니다.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/drawer-suppress-click-after-drag

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@te6-in @claude
test(drawer): cover trailing-click suppression after drag
8ea09a0 
Render the real DrawerContent and assert the contract: a gesture past the
swipe-start threshold suppresses the trailing click, a plain tap clicks
through, and a click-less drag resets on the next pointerdown so the
following tap still fires.

happy-dom drops page coordinates from fireEvent and returns no computed
transform, so the test pins pageX/pageY on the native PointerEvent and
seeds an identity transform + rect — mirroring the existing drag test.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@te6-in te6-in requested a review from junghyeonsu June 9, 2026 11:20
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Alpha Preview (Stackflow SPA)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@junghyeonsu junghyeonsu Awaiting requested review from junghyeonsu

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@te6-in