From 2adf521eb800f2382a263cdefc3ce0ff692cae60 Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Wed, 8 Feb 2023 01:34:28 +0000
Subject: [PATCH] feat: search autofocus

---
 client/src/app/pages/dashboard/search/SearchPage.tsx | 1 +
 client/src/components/util/DebounceSearch.tsx        | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/client/src/app/pages/dashboard/search/SearchPage.tsx b/client/src/app/pages/dashboard/search/SearchPage.tsx
index 8fced7b1c..3ec1dc548 100644
--- a/client/src/app/pages/dashboard/search/SearchPage.tsx
+++ b/client/src/app/pages/dashboard/search/SearchPage.tsx
@@ -40,6 +40,7 @@ export default function SearchPage() {
 		<Row>
 			<Col xs={12}>
 				<DebounceSearch
+					autoFocus
 					className="form-control-lg"
 					setSearch={setSearch}
 					placeholder="Search songs, users..."
diff --git a/client/src/components/util/DebounceSearch.tsx b/client/src/components/util/DebounceSearch.tsx
index 5c6b44913..16d20bc51 100644
--- a/client/src/components/util/DebounceSearch.tsx
+++ b/client/src/components/util/DebounceSearch.tsx
@@ -5,10 +5,12 @@ export default function DebounceSearch({
 	className,
 	setSearch,
 	placeholder,
+	autoFocus = false,
 }: {
 	className?: string;
 	setSearch: SetState<string>;
 	placeholder: string;
+	autoFocus?: boolean;
 }) {
 	const [lastTimeout, setLastTimeout] = useState<null | number>(null);
 	const [uiSearch, setUISearch] = useState("");
@@ -16,6 +18,7 @@ export default function DebounceSearch({
 	return (
 		<div className="input-group">
 			<input
+				autoFocus={autoFocus}
 				className={`form-control ${className}`}
 				type="text"
 				value={uiSearch}