🎨 Palette: Add Escape shortcut to clear search#94
Conversation
|
👋 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. |
📝 WalkthroughWalkthroughAdded documentation and implementation for an Escape key shortcut on the search input. The keydown handler intercepts the Escape key, prevents default behavior, clears the search field, removes focus via blur, and immediately triggers a view refresh through Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 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 |
There was a problem hiding this comment.
Pull request overview
Adds an Escape-key shortcut to the Web UI search input to improve keyboard navigation by clearing the search and refreshing the entry list.
Changes:
- Added
Escapekey handling on the search input to clear/blur and refresh entries. - Updated
.jules/palette.mdwith an internal “learning/action” note about the Escape-to-clear behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/webui/template.ts | Adds an Escape keydown handler to clear search, blur focus, and refresh entries. |
| .jules/palette.md | Adds internal documentation about the Escape-to-clear search UX pattern. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /* ── Bind ── */ | ||
| el.createType.addEventListener('change',switchCreate); | ||
| el.search.addEventListener('input',()=>{if(searchTimer)clearTimeout(searchTimer);searchTimer=setTimeout(()=>{void refreshEntries()},200)}); | ||
| el.search.addEventListener('keydown',ev=>{if(ev.key==='Escape'){ev.preventDefault();el.search.value='';el.search.blur();void refreshEntries();}}); |
There was a problem hiding this comment.
In the Escape handler, consider clearing any pending searchTimer timeout (and resetting it to null) before calling refreshEntries(). Otherwise a previously scheduled debounce from the input handler can still fire after Escape, causing redundant refreshes and extra API calls/rendering.
| el.search.addEventListener('keydown',ev=>{if(ev.key==='Escape'){ev.preventDefault();el.search.value='';el.search.blur();void refreshEntries();}}); | |
| el.search.addEventListener('keydown',ev=>{if(ev.key==='Escape'){ev.preventDefault();if(searchTimer){clearTimeout(searchTimer);searchTimer=null}el.search.value='';el.search.blur();void refreshEntries();}}); |
|
|
||
| ## 2024-03-21 - Escape Key to Clear Search Context | ||
| **Learning:** Implementing an `Escape` key listener to clear input fields like search boxes drastically improves keyboard navigability, but the interaction must comprehensively handle clearing the value, blurring the focus, and resetting the underlying data model view. | ||
| **Action:** When adding `Escape` shortcut interactions to inputs, always ensure the event is captured specifically on that input via `keydown`, prevents default behavior, unfocuses the element via `blur()`, and explicitly triggers any necessary state refreshes (e.g., `refreshEntries()`). |
There was a problem hiding this comment.
This repo has a documented convention to avoid committing generated/internal .jules/* artifacts in merged PR changes (see CHANGELOG.md entry for 0.1.2). Please remove this .jules/palette.md change from the PR (or add the appropriate ignore rule and ensure these files aren’t tracked).
![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/webui/template.ts (1)
1082-1082: Clear pending debounce timer before Escape-triggered refresh.At Line 1082, the immediate refresh can run alongside a previously scheduled debounce from Line 1081, causing duplicate refresh calls. Consider canceling
searchTimerfirst.♻️ Proposed tweak
- el.search.addEventListener('keydown',ev=>{if(ev.key==='Escape'){ev.preventDefault();el.search.value='';el.search.blur();void refreshEntries();}}); + el.search.addEventListener('keydown',ev=>{ + if(ev.key==='Escape'){ + ev.preventDefault(); + if(searchTimer){clearTimeout(searchTimer);searchTimer=null;} + el.search.value=''; + el.search.blur(); + void refreshEntries(); + } + });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/webui/template.ts` at line 1082, The Escape key handler on el.search should clear any pending debounce before calling the immediate refresh to avoid duplicate refreshes; modify the handler in which ev.key === 'Escape' to call clearTimeout(searchTimer) (and reset searchTimer to null/undefined) before setting el.search.value=''/blur() and invoking refreshEntries(), keeping the existing ev.preventDefault() behavior so the pending debounce cannot also fire.
🤖 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/webui/template.ts`:
- Line 1082: The Escape key handler on el.search should clear any pending
debounce before calling the immediate refresh to avoid duplicate refreshes;
modify the handler in which ev.key === 'Escape' to call
clearTimeout(searchTimer) (and reset searchTimer to null/undefined) before
setting el.search.value=''/blur() and invoking refreshEntries(), keeping the
existing ev.preventDefault() behavior so the pending debounce cannot also fire.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7791e85e-82ac-4125-bd00-8ea414161eee
📒 Files selected for processing (2)
.jules/palette.mdsrc/webui/template.ts
Adds an Escape key listener to the search input in the Web UI to clear the value, blur the input, and refresh entries, improving keyboard navigation.
PR created automatically by Jules for task 11726321910484380364 started by @SlasshyOverhere
Summary by CodeRabbit