🎨 Palette: Add keyboard shortcut hint for global search - #451
Conversation
Co-authored-by: corebrimtech <175357468+corebrimtech@users.noreply.github.com>
|
👋 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. |
📝 WalkthroughWalkthroughAdds a global "/" keyboard shortcut in the SecurityDashboard component to focus the search input, guarding against interference when typing in inputs/textareas, updates the input's aria-label and ref, adds a conditional visual hint, and documents the behavior in a journal file. ChangesSearch Keyboard Shortcut
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Document
participant SecurityDashboard
participant SearchInput
User->>Document: presses "/" key
Document->>SecurityDashboard: keydown event
SecurityDashboard->>SecurityDashboard: check document.activeElement
alt not typing in input/textarea
SecurityDashboard->>SearchInput: focus() via searchInputRef
SecurityDashboard->>Document: preventDefault()
else already typing
SecurityDashboard-->>Document: ignore shortcut
end
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/app/page.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. 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.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/page.tsx`:
- Around line 56-74: The global keydown handler in the page component is too
broad because it reacts to any "/" keypress, including modifier combinations
like Ctrl+/, Cmd+/, and Alt+/. Update the `useEffect` handler in `page.tsx` to
only focus `searchInputRef` and call `preventDefault()` when "/" is pressed with
no modifier keys active, while still preserving the existing
input/textarea/contenteditable guard.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a738051d-02de-4b9e-b2e4-6fc090591314
📒 Files selected for processing (2)
.Jules/palette.mdsrc/app/page.tsx
| const searchInputRef = useRef<HTMLInputElement>(null) | ||
|
|
||
| useEffect(() => { | ||
| const handleKeyDown = (e: KeyboardEvent) => { | ||
| if (e.key === '/') { | ||
| // Ignore if focus is already in an input, textarea, or contenteditable | ||
| const activeElement = document.activeElement as HTMLElement | ||
| const isInput = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA' || activeElement?.isContentEditable | ||
|
|
||
| if (!isInput) { | ||
| e.preventDefault() // Prevent "/" from being typed into the search box immediately | ||
| searchInputRef.current?.focus() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener('keydown', handleKeyDown) | ||
| return () => document.removeEventListener('keydown', handleKeyDown) | ||
| }, []) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Guard against modifier-key combinations.
The handler only checks e.key === '/', so Ctrl+/, Cmd+/, or Alt+/ also trigger preventDefault() and steal focus, hijacking OS/browser combos that happen to use / with a modifier.
💡 Proposed fix
const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === '/') {
+ if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey) {
// Ignore if focus is already in an input, textarea, or contenteditable
const activeElement = document.activeElement as HTMLElement📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const searchInputRef = useRef<HTMLInputElement>(null) | |
| useEffect(() => { | |
| const handleKeyDown = (e: KeyboardEvent) => { | |
| if (e.key === '/') { | |
| // Ignore if focus is already in an input, textarea, or contenteditable | |
| const activeElement = document.activeElement as HTMLElement | |
| const isInput = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA' || activeElement?.isContentEditable | |
| if (!isInput) { | |
| e.preventDefault() // Prevent "/" from being typed into the search box immediately | |
| searchInputRef.current?.focus() | |
| } | |
| } | |
| } | |
| document.addEventListener('keydown', handleKeyDown) | |
| return () => document.removeEventListener('keydown', handleKeyDown) | |
| }, []) | |
| const searchInputRef = useRef<HTMLInputElement>(null) | |
| useEffect(() => { | |
| const handleKeyDown = (e: KeyboardEvent) => { | |
| if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey) { | |
| // Ignore if focus is already in an input, textarea, or contenteditable | |
| const activeElement = document.activeElement as HTMLElement | |
| const isInput = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA' || activeElement?.isContentEditable | |
| if (!isInput) { | |
| e.preventDefault() // Prevent "/" from being typed into the search box immediately | |
| searchInputRef.current?.focus() | |
| } | |
| } | |
| } | |
| document.addEventListener('keydown', handleKeyDown) | |
| return () => document.removeEventListener('keydown', handleKeyDown) | |
| }, []) |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/page.tsx` around lines 56 - 74, The global keydown handler in the
page component is too broad because it reacts to any "/" keypress, including
modifier combinations like Ctrl+/, Cmd+/, and Alt+/. Update the `useEffect`
handler in `page.tsx` to only focus `searchInputRef` and call `preventDefault()`
when "/" is pressed with no modifier keys active, while still preserving the
existing input/textarea/contenteditable guard.
1 participant
What: Added a global keyboard shortcut (
/) to focus the search input field, including a visual<kbd>hint and screen reader support.Why: To improve keyboard navigation and allow power users to quickly initiate searches without reaching for the mouse, enhancing overall usability.
Before/After: The search input previously lacked a quick access shortcut. Now, pressing
/focuses the field, and a visual hint is displayed when empty.Accessibility: The visual
<kbd>element is hidden from screen readers (aria-hidden="true") to prevent duplicate announcements, as the input'saria-labelnow includes "(Press / to focus)". The shortcut listener correctly ignores keypresses when focus is already within an input or textarea element.PR created automatically by Jules for task 2694539742449343186 started by @corebrimtech
Summary by CodeRabbit
New Features
/keyboard shortcut to focus the search box.Bug Fixes