.

client/src/components/Forms/FormTextAreaField.tsx

@@ -8,27 +8,15 @@ import {
   FormMessage,
   Textarea,
 } from "@/ui";
+import * as React from "react";
 
-import {
+import { FieldErrors, FieldPath, FieldValues, UseControllerProps } from "react-hook-form";
-  FieldErrors,
-  FieldPath,
-  FieldValues,
-  UseControllerProps,
-} from "react-hook-form";
 import { FormLabel, FormLabelProps } from "./FormLabel";
 
-export const FormTextAreaField = <
+export type FormTextAreaFieldProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
+> = {
-  label,
-  hint,
-  placeholder,
-  description,
-  autoSize,
-  className,
-  ...props
-}: {
   autoSize?: boolean;
   placeholder?: string;
   description?: string;
@@ -36,27 +24,33 @@ export const FormTextAreaField = <
 } & Partial<FormLabelProps> &
   UseControllerProps<TFieldValues, TName> & {
     errors?: FieldErrors<TFieldValues>;
-  }) => {
+  };
+
+export const FormTextAreaField = React.forwardRef<
+  HTMLDivElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement> & FormTextAreaFieldProps
+>(({ label, hint, placeholder, description, autoSize, className, ...props }, ref) => {
   return (
     <FormField
       control={props.control}
       name={props.name}
-      render={({ field }) => (
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        <FormItem className={cn(className, "flex flex-col")}>
+      render={({ field, fieldState, formState }) => (
+        <FormItem ref={ref} className={cn(className, "flex flex-col")}>
           {label && <FormLabel label={label} hint={hint} />}
           <FormControl>
             {autoSize ? (
               <AutosizeTextarea
                 disabled={props.disabled}
                 placeholder={placeholder}
-                className="resize-y"
+                className='resize-y'
                 {...field}
               />
             ) : (
               <Textarea
                 disabled={props.disabled}
                 placeholder={placeholder}
-                className="resize-y"
+                className='resize-y'
                 {...field}
               />
             )}
@@ -67,4 +61,4 @@ export const FormTextAreaField = <
       )}
     />
   );
-};
+});

client/src/components/Forms/FormTextField.tsx

@@ -11,20 +11,15 @@ import {
 
 import * as React from "react";
 import { createElement } from "react";
-import {
+import { FieldErrors, FieldPath, FieldValues, UseControllerProps } from "react-hook-form";
-  FieldErrors,
-  FieldPath,
-  FieldValues,
-  UseControllerProps,
-} from "react-hook-form";
 import { FormLabel, FormLabelProps } from "./FormLabel";
 import { FormInputProps, FormInputWithIconProps } from "./FormProps";
 
 export type FormTextFieldProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
-  button?: (props?) => React.ReactNode;
+  button?: (props?: React.PropsWithChildren) => React.ReactNode;
 } & InputProps &
   FormInputProps &
   Partial<FormLabelProps> &
@@ -33,23 +28,27 @@ export type FormTextFieldProps<
     errors?: FieldErrors<TFieldValues>;
   };
 
-export function FormTextField({
+export const FormTextField = React.forwardRef<
-  label,
+  HTMLDivElement,
-  placeholder,
+  React.HTMLAttributes<HTMLDivElement> & FormTextFieldProps
-  hint,
+>((props, ref) => {
-  description,
+  const {
-  required,
+    label,
-  className,
+    placeholder,
-  leadIcon,
+    hint,
-  trailIcon,
+    description,
-  button,
+    required,
-  disabled,
+    className,
-  errors,
+    leadIcon,
-  name,
+    trailIcon,
-  control,
+    button,
-  type,
+    disabled,
-}: FormTextFieldProps) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  //const error = Boolean(errors && errors[name]);
+    errors,
+    name,
+    control,
+    type,
+  } = props;
 
   return (
     <FormField
@@ -57,54 +56,44 @@ export function FormTextField({
       name={name}
       rules={{ required }}
       disabled={disabled}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       render={({ field, fieldState, formState }) => (
-        <FormItem className={cn(className, "space-y-3")}>
+        <FormItem ref={ref} className={cn(className, "space-y-3")}>
           {label && <FormLabel label={label} hint={hint} />}
           <div className={cn(button ? "flex" : null)}>
             <div
               className={cn(
-                leadIcon
+                leadIcon ? "relative flex items-stretch flex-grow focus-within:z-10" : ""
-                  ? "relative flex items-stretch flex-grow focus-within:z-10"
-                  : "",
               )}
             >
               {leadIcon && (
-                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                <div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none'>
                   {React.createElement(
                     leadIcon,
                     {
                       className: "h-5 w-5 text-muted-foreground",
                       "aria-hidden": true,
                     },
-                    null,
+                    null
                   )}
                 </div>
               )}
 
               <FormControl
-                className={cn(
+                className={cn("block", leadIcon ? "pl-10" : "", trailIcon ? "pr-10" : "")}
-                  "block",
-                  leadIcon ? "pl-10" : "",
-                  trailIcon ? "pr-10" : "",
-                )}
               >
-                <Input
+                <Input type={type} placeholder={placeholder} disabled={disabled} {...field} />
-                  type={type}
-                  placeholder={placeholder}
-                  disabled={disabled}
-                  {...field}
-                />
               </FormControl>
 
               {trailIcon && (
-                <div className="absolute inset-y-0 right-0 flex items-center pl-3 pointer-events-none">
+                <div className='absolute inset-y-0 right-0 flex items-center pl-3 pointer-events-none'>
                   {createElement(
                     trailIcon,
                     {
                       className: "h-5 w-5 text-muted-foreground",
                       "aria-hidden": true,
                     },
-                    null,
+                    null
                   )}
                 </div>
               )}
@@ -117,4 +106,4 @@ export function FormTextField({
       )}
     />
   );
-}
+});