auto focus now possible

app/components/Input.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { twMerge } from "tailwind-merge";
 import { IconDefinition } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -11,7 +12,11 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   icon?: IconDefinition;
 }
 
-export function Input({ label, icon, className, id, ...rest }: InputProps) {
+export const Input = React.forwardRef(({
+   label, icon, className, id, ...rest 
+  }: InputProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) => {
   return (
     <div className={twMerge("flex flex-col gap-2", className)}>
       {label && <Label htmlFor={id ? id : kebabCase(label)}>{label}</Label>}
@@ -21,6 +26,7 @@ export function Input({ label, icon, className, id, ...rest }: InputProps) {
           <FontAwesomeIcon icon={icon} className="absolute h-5 pl-3 pt-2.5" />
         )}
         <input
+          ref={ref}
           id={id ? id : label ? kebabCase(label) : undefined}
           className={twMerge(
             "h-10 w-full rounded-md bg-brand-secondary px-3 py-2.5 text-white outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary",
@@ -33,4 +39,4 @@ export function Input({ label, icon, className, id, ...rest }: InputProps) {
       </div>
     </div>
   );
-}
+});

app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectTtsModel.tsx

@@ -1,5 +1,5 @@
 
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons";
 
 import { H2, ButtonIcon, Input } from "~/components";
@@ -28,6 +28,11 @@ export const PageSelectTtsModel = ({
     })
 
   const slicedArray = filteredListOfModels.slice(0, 20);
+  
+  const refCallback = useCallback((node:HTMLInputElement)=>{
+    if(node) node.focus();
+    //auto focus on the mounting on the input component
+  },[]);
 
   return(
     <div className="flex flex-col px-4 pt-2">
@@ -40,19 +45,23 @@ export const PageSelectTtsModel = ({
         <H2 className="font-semibold">Search TTS Voices</H2>
       </div>
       <Input
+        ref={refCallback}
         className="mb-4"
         placeholder="Search Voice by Name"
         onChange={(e)=>setQuery(e.target.value)}
       />
-      <div className="flex flex-col gap-3">
-        {slicedArray.map((item)=>{
-          return(
-            <VoiceModelElement
-              model={item}
-              onSelect={(item)=>onSelect(item as TtsModelListItem)}
-            />
-          );
-        })}
+      <div className="w-full overflow-x-auto">
+        <div className="flex flex-col gap-3">
+          {slicedArray.map((item)=>{
+            return(
+              <VoiceModelElement
+                key={item.model_token}
+                model={item}
+                onSelect={(item)=>onSelect(item as TtsModelListItem)}
+              />
+            );
+          })}
+        </div>
       </div>
     </div>
   );

app/pages/PageEnigma/comps/SidePanelTabs/AudioTab/pageSelectV2VModel.tsx

@@ -1,5 +1,5 @@
 
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons";
 
 import { H2, ButtonIcon, Input } from "~/components";
@@ -29,6 +29,10 @@ export const PageSelectV2VModel = ({
 
   const slicedArray = filteredListOfModels.slice(0, 20);
 
+  const refCallback = useCallback((node:HTMLInputElement)=>{
+    if(node) node.focus();
+  },[]);
+
   return(
     <div className="flex flex-col px-4 pt-2">
       <div className="pb-4 flex items-center gap-3">
@@ -40,6 +44,7 @@ export const PageSelectV2VModel = ({
         <H2 className="font-semibold">Search TTS Voices</H2>
       </div>
       <Input
+        ref={refCallback}
         className="mb-4"
         placeholder="Search Voice by Name"
         onChange={(e)=>setQuery(e.target.value)}