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:
@@ -26,6 +26,8 @@ export const SearchField = ({ value, onChange }: Props) => {
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, []);
|
||||
|
||||
const blurInput = () => inputRef.current?.blur();
|
||||
|
||||
return (
|
||||
<div className="search">
|
||||
<Icon.search />
|
||||
@@ -35,6 +37,16 @@ export const SearchField = ({ value, onChange }: Props) => {
|
||||
placeholder="Search games"
|
||||
value={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}
|
||||
/>
|
||||
<span className="search-kbd">/</span>
|
||||
|
||||
Reference in New Issue
Block a user