Fix voice input revert#233
Merged
Merged
Conversation
This revert restores the isComposingRef logic and handles composition end events to ensure text is correctly sent from a hidden input, fixing regressions in voice input behavior on mobile devices.
Contributor
WalkthroughAdds IME composition awareness to the trackpad hidden input: tracks composition state, wires compositionstart/compositionend events to derive and send final text (or apply modifier behavior), suppresses intermediate composition text, and refocuses the hidden input on blur when keyboard is open. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TrackpadComponent
participant HiddenInput
participant RemoteSender
User->>HiddenInput: start composition (IME)
HiddenInput->>TrackpadComponent: onCompositionStart -> set isComposingRef(true)
User->>HiddenInput: type composing characters (intermediate)
HiddenInput->>TrackpadComponent: onInput (ignored while composing)
User->>HiddenInput: end composition (commit text)
HiddenInput->>TrackpadComponent: onCompositionEnd -> get final text, reset hidden input
TrackpadComponent->>RemoteSender: sendText or applyModifierCommand(final text)
TrackpadComponent->>HiddenInput: refocus onBlur (if keyboard open) after timeout
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/routes/trackpad.tsx`:
- Around line 85-90: Remove the raw console.log that prints live input payloads
(the console.log("Input Event:", { inputType, data, val, isComposing:
isComposingRef.current })) and any similar logs that print sensitive values
(also at the other noted locations), and replace them with either no-op in
production or a dev-only sanitized log: guard logging with a dev check (e.g.,
NODE_ENV or a debug flag) and redact actual text fields (show masked value,
length, or type only) while still preserving contextual keys like inputType and
isComposingRef.current for debugging; update all occurrences that log variables
named inputType, data, val, or isComposingRef to follow this pattern.
Removed console.log statements that captured user input to comply with security guidelines and reduce overhead on the input path.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/routes/trackpad.tsx (1)
1-14:⚠️ Potential issue | 🟡 MinorMissing
"use client"directive.This component uses client-side React features (
useState,useEffect,useRef, event handlers). Per NextJS guidelines, add the directive at the top of the file.+"use client" + import { BufferBar } from "@/components/Trackpad/Buffer"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/routes/trackpad.tsx` around lines 1 - 14, Add the Next.js client directive by inserting "use client" as the very first line of the file (before any imports) so the TrackpadPage component and hooks (useState, useEffect, useRef, useRemoteConnection, useTrackpadGesture) are treated as client-side; ensure the directive appears above the existing imports (e.g., BufferBar, ControlBar, TouchArea, ScreenMirror) so createFileRoute and the exported Route/component work correctly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/routes/trackpad.tsx`:
- Around line 75-77: handlePaste is marked async but doesn't await anything;
remove the unnecessary async keyword or implement clipboard reading. Fix by
either changing "const handlePaste = async () => { send({ type: 'paste' }) }" to
"const handlePaste = () => { send({ type: 'paste' }) }" or, if you intended to
read the clipboard, implement and await navigator.clipboard.readText() inside
handlePaste and include the text in the event (e.g., const text = await
navigator.clipboard.readText(); send({ type: 'paste', text })). Ensure you
update any callers expecting a promise accordingly.
- Around line 281-285: The onBlur handler schedules a setTimeout to focus
hiddenInputRef which can run after unmount or after keyboardOpen changed; fix by
storing the timeout id in a ref (e.g., focusTimeoutRef), clear that timeout in a
useEffect cleanup (and on subsequent onBlur calls), and inside the timeout
callback guard that the component is still mounted and hiddenInputRef.current
exists and keyboardOpen is still true before calling focus; update the onBlur
that uses keyboardOpen, setTimeout, and hiddenInputRef accordingly and add the
cleanup logic in the component hook.
---
Outside diff comments:
In `@src/routes/trackpad.tsx`:
- Around line 1-14: Add the Next.js client directive by inserting "use client"
as the very first line of the file (before any imports) so the TrackpadPage
component and hooks (useState, useEffect, useRef, useRemoteConnection,
useTrackpadGesture) are treated as client-side; ensure the directive appears
above the existing imports (e.g., BufferBar, ControlBar, TouchArea,
ScreenMirror) so createFileRoute and the exported Route/component work
correctly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR restores and improves the composition handling in the trackpad input flow. It addresses regressions in voice input behavior on mobile devices while maintaining the real-time typing experience where possible.
Functional Verification
Screen Mirror
Authentication
Basic Gestures
One-finger tap: Verified as Left Click.
Two-finger tap: Verified as Right Click.
Click and drag: Verified selection behavior.
Pinch to zoom: Verified zoom functionality (if applicable).
Modes & Settings
Cursor mode: Cursor moves smoothly and accurately.
Scroll mode: Page scrolls as expected.
Sensitivity: Verified changes in cursor speed/sensitivity settings.
Copy and Paste: Verified both Copy and Paste functionality.
Invert Scrolling: Verified scroll direction toggles correctly.
Advanced Input
Key combinations: Verified "hold" behavior for modifiers (e.g., Ctrl+C) and held keys are shown in buffer.
Keyboard input: Verified Space, Backspace, and Enter keys work correctly.
Glide typing: Verified path drawing and text output.
Voice input: Verified speech-to-text functionality for full sentences.
Backspace doesn't send the previous input.
Any other gesture or input behavior introduced:
Additional Notes:
Checklist
My PR addresses a single issue, fixes a single bug or makes a single improvement.
My code follows the project's code style and conventions
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
If applicable, I have made corresponding changes or additions to the documentation
If applicable, I have made corresponding changes or additions to tests
My changes generate no new warnings or errors
I have joined the and I will share a link to this PR with the project maintainers there
I have read the
Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
Incase of UI change I've added a demo video.
Summary by CodeRabbit
New Features
Bug Fixes