🎨 Palette: Add Cmd/Ctrl+K shortcut for search input - #162
Conversation
Adds a Cmd+K / Ctrl+K keyboard shortcut to focus the global search input on the main dashboard. Includes a visual <kbd> hint that dynamically updates based on the user's OS, ensuring keyboard accessibility via `aria-keyshortcuts`. Also automatically refocuses the input when the 'clear' button is clicked. Co-authored-by: corebrimtech <175357468+corebrimtech@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughAdded keyboard shortcut support (Ctrl+K / Meta+K) to focus the search input with platform detection, global keydown listener, visual kbd hint, and improved search-clear button behavior including accessibility attributes. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/app/page.tsx (1)
64-69: Consider guarding against shortcut conflicts in editable fields.The global keydown handler will intercept Ctrl+K/Cmd+K even when the user is typing in other input fields or text areas. This is a common pattern for global search shortcuts (used by GitHub, Slack, etc.), but if there are other editable fields on the page where Ctrl+K might have meaning (e.g., creating hyperlinks in rich text editors), consider adding a guard:
♻️ Optional guard for editable contexts
const handleKeyDown = (e: KeyboardEvent) => { + // Skip if user is in a contenteditable or non-search input + const target = e.target as HTMLElement + if (target.isContentEditable) return + if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault() searchInputRef.current?.focus() } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/page.tsx` around lines 64 - 69, The global keyboard handler handleKeyDown currently focuses searchInputRef on Ctrl/Cmd+K even when the user is inside other editable elements; update handleKeyDown to ignore the shortcut when the event target is an input, textarea or an element with contentEditable="true" (and optionally when composing) by early-returning in those cases before calling searchInputRef.current?.focus(); reference the handleKeyDown function and searchInputRef to locate and implement this guard.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/app/page.tsx`:
- Around line 64-69: The global keyboard handler handleKeyDown currently focuses
searchInputRef on Ctrl/Cmd+K even when the user is inside other editable
elements; update handleKeyDown to ignore the shortcut when the event target is
an input, textarea or an element with contentEditable="true" (and optionally
when composing) by early-returning in those cases before calling
searchInputRef.current?.focus(); reference the handleKeyDown function and
searchInputRef to locate and implement this guard.
1 participant
💡 What:
Added a
Cmd+K(Mac) orCtrl+K(Windows/Linux) keyboard shortcut to quickly focus the global search input on the Security Dashboard.🎯 Why:
For power users and keyboard-heavy workflows, reaching for the mouse to click the search bar is a source of friction. Adding a standard
Cmd/Ctrl+Kshortcut significantly speeds up interaction.📸 Before/After:
Before: Search input was plain text, requiring a manual click to focus.
After: Search input displays a subtle, OS-aware
<kbd>hint (e.g.,⌘K) when empty. Pressing the shortcut instantly focuses the input. Clearing the input also smartly returns focus to the search bar.♿ Accessibility:
aria-keyshortcutsattribute to the input element so screen readers can announce the shortcut.isMountedeffect to prevent React Server-Side Rendering (SSR) hydration mismatch errors.PR created automatically by Jules for task 7158290000471400712 started by @corebrimtech
Summary by CodeRabbit
Release Notes