diff --git a/.Jules/palette.md b/.Jules/palette.md index 1a42271..36298ec 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -3,3 +3,7 @@ ## 2025-05-20 - Accessible Clear Button for Search Inputs **Learning:** Adding an `onClear` callback support to shared `Input` components allows easily embedding an accessible clear (`X`) button inside search inputs without breaking layout or padding. **Action:** When creating reusable input primitives, build optional clear action slots with dynamic right padding (`pr-9`) and customizable `clearLabel` for screen readers. + +## 2025-05-21 - Preserving Input Focus on Clear Button Click +**Learning:** Adding `onMouseDown={(e) => e.preventDefault()}` to clear buttons inside text inputs prevents mouse clicks from blurring the input element, keeping keyboard focus directly inside the text field so typing can resume seamlessly. +**Action:** Always attach `onMouseDown={(e) => e.preventDefault()}` to icon buttons nested inside text controls that act as text modifiers. diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx index 5e9a366..8960ef7 100644 --- a/src/components/CommandPalette.tsx +++ b/src/components/CommandPalette.tsx @@ -435,6 +435,8 @@ export default function CommandPalette() { icon={Search} value={query} onChange={(e) => setQuery(e.target.value)} + onClear={query ? () => setQuery("") : undefined} + clearLabel="Clear command search" onKeyDown={(e) => { if (e.key === "Tab") { // Single-focus surface (aria-activedescendant): keep focus on diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx index 3c7080e..c257901 100644 --- a/src/components/ui/Input.tsx +++ b/src/components/ui/Input.tsx @@ -44,6 +44,7 @@ export default function Input({