From 0abf043d6d9c80e54687d2765e728cc3ed157f90 Mon Sep 17 00:00:00 2001
From: Hinson Chan <yhc3141@gmail.com>
Date: Wed, 21 Feb 2024 15:25:54 -0800
Subject: [PATCH] Auto focus search bar when plugins/themes tab is selected
 (#1705)

#1213
---
 renderer/src/ui/settings/components/search.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/renderer/src/ui/settings/components/search.jsx b/renderer/src/ui/settings/components/search.jsx
index 1bd481c8..26c8d4fb 100644
--- a/renderer/src/ui/settings/components/search.jsx
+++ b/renderer/src/ui/settings/components/search.jsx
@@ -1,19 +1,26 @@
 import React from "@modules/react";
 import SearchIcon from "@ui/icons/search";
 
-const {useState, useCallback} = React;
+const {useState, useEffect, useCallback, useRef} = React;
 
 
 export default function Search({onChange, className, onKeyDown, placeholder}) {
+    const input = useRef(null);
     const [value, setValue] = useState("");
+
+    // focus search bar on page select
+    useEffect(()=>{
+        if (!input.current) return;
+        input.current.focus();
+    }, []);
+
     const change = useCallback((e) => {
         onChange?.(e);
         setValue(e.target.value);
     }, [onChange]);
 
-
     return <div className={"bd-search-wrapper" + (className ? ` ${className}` : "")}>
-                <input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} />
+                <input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} ref={input}/>
                 <SearchIcon />
             </div>;