fix(ui): handle enter and escape in search

The search field should behave like a transient launcher search control. Enter
now blurs the input while preserving the current term, and Escape clears the
term before blurring the input.

Test Plan:
- git diff --check

Refs: user redesign nitpick about search keyboard behavior
This commit is contained in:
2026-05-19 20:48:12 +02:00
parent 2af55981c3
commit a6130fc687
@@ -26,6 +26,8 @@ export const SearchField = ({ value, onChange }: Props) => {
return () => window.removeEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey);
}, []); }, []);
const blurInput = () => inputRef.current?.blur();
return ( return (
<div className="search"> <div className="search">
<Icon.search /> <Icon.search />
@@ -35,6 +37,16 @@ export const SearchField = ({ value, onChange }: Props) => {
placeholder="Search games" placeholder="Search games"
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
blurInput();
} else if (e.key === 'Escape') {
e.preventDefault();
onChange('');
blurInput();
}
}}
spellCheck={false} spellCheck={false}
/> />
<span className="search-kbd">/</span> <span className="search-kbd">/</span>