Autoselect search bar when opening site

Krassnig · Oct 1, 2023 · 1d76b3f · 1d76b3f
1 parent 6ecda38
commit 1d76b3f
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/react/src/@/components/SearchField.tsx b/react/src/@/components/SearchField.tsx
@@ -1,16 +1,24 @@
 import { SetState } from "@/types";
 import "./SearchField.css";
+import { useEffect, useState } from "react";
 
 interface Props {
 	search: string;
 	setSearch: SetState<string>;
 }
 
 export const SearchField: React.FC<Props> = ({ search, setSearch }) => {
+	const [textInput, setTextInput] = useState<HTMLInputElement | null>(null);
+
+	useEffect(() => {
+		if (textInput !== null) {
+			textInput.select();
+		}
+	}, [textInput]);
 
 	return (
 		<div className="search-field">
-			<input className="_input" type="text" placeholder="Suche nach Rezepten..." value={search} onChange={e => setSearch(e.target.value)} />
+			<input ref={setTextInput} className="_input" type="text" placeholder="Suche nach Rezepten..." value={search} onChange={e => setSearch(e.target.value)} />
 			{ search !== '' && (<button className="_clear" type="button" onClick={() => setSearch('')}>×</button>) }
 		</div>
 	);