csr tangled client in solid-js
make search bar actually focusable with /
+17
+17
src/layout.tsx
+17
src/layout.tsx
···
247
247
const location = useLocation();
248
248
const [query, setQuery] = createSignal('');
249
249
250
+
let inputRef: HTMLInputElement | undefined;
251
+
onMount(() => {
252
+
const handler = (e: KeyboardEvent) => {
253
+
if (e.ctrlKey || e.metaKey) return;
254
+
if (e.key === "/") {
255
+
e.preventDefault();
256
+
inputRef?.focus();
257
+
} else if (e.key === "Escape") {
258
+
setQuery('');
259
+
inputRef?.blur();
260
+
}
261
+
}
262
+
window.addEventListener("keydown", handler)
263
+
onCleanup(() => window.removeEventListener("keydown", handler))
264
+
});
265
+
250
266
createEffect(() => {
251
267
if (location.pathname !== '/search') {
252
268
setQuery('');
···
268
284
<div class="untangled-topbar-search-box">
269
285
<Search class="size-4 shrink-0 text-gray-400" />
270
286
<input
287
+
ref={inputRef}
271
288
value={query()}
272
289
onInput={(event) => setQuery(event.currentTarget.value)}
273
290
placeholder="search..."