From 229fd118d26514212b140d2db07f932a4de83028 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 5 Oct 2026 11:30:31 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessible=20se?=
 =?UTF-8?q?arch=20clear=20button=20to=20command=20palette=20and=20preserve?=
 =?UTF-8?q?=20input=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: TheDragonSoft <75906592+TheDragonSoft@users.noreply.github.com>
---
 .Jules/palette.md                 | 4 ++++
 src/components/CommandPalette.tsx | 2 ++
 src/components/ui/Input.tsx       | 1 +
 3 files changed, 7 insertions(+)

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({
         <button
           type="button"
           onClick={onClear}
+          onMouseDown={(e) => e.preventDefault()}
           aria-label={clearLabel}
           className="absolute top-1/2 right-2.5 -translate-y-1/2 rounded-md p-1 text-stone-400 transition-colors hover:bg-surface-2 hover:text-stone-200 focus-visible:outline-2 focus-visible:outline-accent"
         >