Add auto focus to search bar

1 files changed, 8 insertions, 1 deletions

diff --git a/gui/src/renderer/components/SearchBar.tsx b/gui/src/renderer/components/SearchBar.tsx
index a659f6130f..c70e5c3de1 100644
--- a/gui/src/renderer/components/SearchBar.tsx
+++ b/gui/src/renderer/components/SearchBar.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import { colors } from '../../config.json';
@@ -68,6 +68,7 @@ interface ISearchBarProps {
   searchTerm: string;
   onSearch: (searchTerm: string) => void;
   className?: string;
+  disableAutoFocus?: boolean;
 }
 
 export default function SearchBar(props: ISearchBarProps) {
@@ -86,6 +87,12 @@ export default function SearchBar(props: ISearchBarProps) {
     inputRef.current?.blur();
   }, [props.onSearch]);
 
+  useEffect(() => {
+    if (!props.disableAutoFocus) {
+      inputRef.current?.focus();
+    }
+  }, []);
+
   return (
     <StyledSearchContainer className={props.className}>
       <StyledSearchInput