✨ Add autofocus for searchbar (#1408)

src/components/layout/header/Header.tsx

@@ -23,6 +23,7 @@ type MainHeaderProps = {
   headerActions?: React.ReactNode;
   contentComponents?: React.ReactNode;
   leftIcon?: React.ReactNode;
+  autoFocusSearch?: boolean;
 };
 
 export const MainHeader = ({
@@ -31,6 +32,7 @@ export const MainHeader = ({
   headerActions,
   leftIcon,
   contentComponents,
+  autoFocusSearch,
 }: MainHeaderProps) => {
   const { breakpoints } = useMantineTheme();
   const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
@@ -51,7 +53,7 @@ export const MainHeader = ({
           </UnstyledButton>
         </Group>
 
-        {!isSmallerThanMd && <Search />}
+        {!isSmallerThanMd && <Search autoFocus={autoFocusSearch} />}
 
         <Group noWrap style={{ flex: 1 }} position="right">
           <Group noWrap spacing={8}>

src/components/layout/header/Search.tsx

@@ -19,9 +19,10 @@ import { MovieModal } from './Search/MovieModal';
 
 type SearchProps = {
   isMobile?: boolean;
+  autoFocus?: boolean;
 };
 
-export const Search = ({ isMobile }: SearchProps) => {
+export const Search = ({ isMobile, autoFocus }: SearchProps) => {
   const { t } = useTranslation('layout/header');
   const [search, setSearch] = useState('');
   const ref = useRef<HTMLInputElement>(null);
@@ -62,6 +63,7 @@ export const Search = ({ isMobile }: SearchProps) => {
         variant="filled"
         placeholder={`${t('search.label')}...`}
         hoverOnSearchChange
+        autoFocus={autoFocus}
         rightSection={
           <IconSearch
             onClick={() => ref.current?.focus()}