chore: give autofocus to the toolbar search form

1 files changed, 14 insertions, 10 deletions

diff --git a/src/components/atoms/forms/field.tsx b/src/components/atoms/forms/field.tsx
index e45a8a7..377e1b0 100644
--- a/src/components/atoms/forms/field.tsx
+++ b/src/components/atoms/forms/field.tsx
@@ -1,4 +1,9 @@
-import { ChangeEvent, FC, SetStateAction } from 'react';
+import {
+  ChangeEvent,
+  forwardRef,
+  ForwardRefRenderFunction,
+  SetStateAction,
+} from 'react';
 import styles from './forms.module.scss';
 
 export type FieldType =
@@ -72,12 +77,10 @@ export type FieldProps = {
  *
  * Render either an input or a textarea.
  */
-const Field: FC<FieldProps> = ({
-  className = '',
-  setValue,
-  type,
-  ...props
-}) => {
+const Field: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
+  { className = '', setValue, type, ...props },
+  ref
+) => {
   /**
    * Update select value when an option is selected.
    * @param e - The option change event.
@@ -96,12 +99,13 @@ const Field: FC<FieldProps> = ({
     />
   ) : (
     <input
-      type={type}
-      onChange={updateValue}
       className={`${styles.field} ${className}`}
+      onChange={updateValue}
+      ref={ref}
+      type={type}
       {...props}
     />
   );
 };
 
-export default Field;
+export default forwardRef(Field);