fix(app): preserve shortcut search focus

packages/app/e2e/regression/settings-search.spec.ts

@@ -172,6 +172,24 @@ test("Models and Shortcuts autofocus their filters on normal navigation", async
   await expect(result).toBeFocused()
 })
 
+test.describe("mobile shortcut search", () => {
+  test.use({ viewport: { width: 390, height: 844 } })
+
+  test("keeps focus after its first character", async ({ page }) => {
+    const view = ui(page)
+    await view.settings.getByRole("button", { name: "Preferences", exact: true }).click()
+    await page.getByRole("menuitemradio", { name: "Shortcuts", exact: true }).click()
+    const search = view.settings.getByRole("searchbox", { name: "Search shortcuts", exact: true })
+    await search.click()
+    await expect(search).toBeFocused()
+
+    await search.press("s")
+
+    await expect(search).toHaveValue("s")
+    await expect(search).toBeFocused()
+  })
+})
+
 test("all indexed client controls resolve to visible production controls", async ({ page }) => {
   const view = ui(page)
   for (const entry of clientSettings.filter((entry) => entry.target && !entry.available)) {

packages/app/src/settings/keybinds/keybinds.tsx

@@ -1,8 +1,7 @@
-import { For, Show, createEffect, createMemo, lazy, on, onCleanup } from "solid-js"
+import { For, Show, createEffect, createMemo, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Button } from "@opencode/ui/button"
-import { IconButton } from "@opencode/ui/icon-button"
 import { TextInput } from "@opencode/ui/text-input"
 import { showToast } from "@/shell/notifications/toast"
 import fuzzysort from "fuzzysort"
@@ -17,8 +16,6 @@ import { useLanguage } from "@/runtime/i18n/language"
 import { useSettings } from "@/settings/model"
 import { SettingsList } from "@/settings/list"
 
-const Icon = lazy(() => import("@opencode/ui/icon").then((module) => ({ default: module.Icon })))
-
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"
 
@@ -421,17 +418,9 @@ function SettingsKeybindsView(props: {
             autocomplete="off"
             autocapitalize="off"
             aria-label={language.t("settings.shortcuts.search.placeholder")}
+            showClearButton={!!store.filter}
+            onClearClick={() => setStore("filter", "")}
           />
-          <Show when={store.filter}>
-            <IconButton
-              type="button"
-              variant="ghost-muted"
-              size="small"
-              class="settings-tab-search-clear"
-              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
-              onClick={() => setStore("filter", "")}
-            />
-          </Show>
         </div>
       </div>
       <div class="settings-tab-body">

packages/app/src/settings/settings.css

@@ -875,14 +875,6 @@
   color: var(--v2-text-text-base);
 }
 
-.settings-tab-search-clear {
-  position: absolute;
-  top: 50%;
-  inset-inline-end: 6px;
-  z-index: 1;
-  transform: translateY(-50%);
-}
-
 .settings-models {
   gap: 12px;
 }