Fix: Prevent accidental key clicks during horizontal scrolling in mobile UI

[DeveloperAmrit]

Fixes #24

Description
This PR addresses a bug in the mobile UI where scrolling through the horizontal list of keys unintentionally triggered key clicks due to improper event handling.

Changes Made:

1. Updated ExtraKeys.tsx:
   • Replaced onPointerDown with onClick for key buttons and the Play/Pause button.
   • Adjusted event handler types from React.PointerEvent to React.MouseEvent

Bug Details:

• Issue: Key clicks were triggered during scroll gestures because onPointerDown fired immediately when the user touched the screen.
• Fix: Switched to onClick, which only fires after the pointer is released. Mobile browsers cancel click events if a scroll gesture is detected, preventing accidental key presses.

Steps to Test:

1. Run the application on a laptop.
2. Connect it with a mobile device.
3. Scroll through the horizontal list of keys.
4. Verify that no keys are clicked during scrolling.
5. Tap on a key to ensure it still functions as expected.
6. TESTED successfully and passed

Summary by CodeRabbit

• Refactor
  • Internal event handling updates to interactive controls with no user-facing changes.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes replace pointer event handling with click event handling in the ExtraKeys component, migrating from onPointerDown to onClick and updating corresponding event types from PointerEvent to MouseEvent to prevent scroll gestures from triggering unintended key actions.

Changes

Cohort / File(s)	Summary
Event Handler Migration src/components/Trackpad/ExtraKeys.tsx	Replaced onPointerDown with onClick and updated internal event handlers (handleInteract, handlePlayPause) to use MouseEvent instead of PointerEvent.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• feat: complete key mappings and special keys UI  #11: Related to the same file (src/components/Trackpad/ExtraKeys.tsx) with modifications to internal interaction handlers and event handling logic.

Poem

🐰 Scroll no more triggers keys so bright,
Click-only now, the touch is right!
Pointer events drift away,
Mouse clicks guide us through the day ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: replacing pointer event handling with click event handling to prevent accidental key clicks during scrolling on mobile devices.
Linked Issues check	✅ Passed	The code changes directly address issue #24 by replacing onPointerDown with onClick and updating event types, which prevents accidental clicks during scrolling on mobile as intended.
Out of Scope Changes check	✅ Passed	All changes in ExtraKeys.tsx are directly related to fixing the scrolling click issue; no unrelated modifications to other files or functionality are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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