✨(react) react-hook-form Input example

Our form elements needs to be usable with react-hook-form

packages/react/src/components/Forms/Input/index.tsx

@@ -3,7 +3,6 @@ import React, {
   InputHTMLAttributes,
   ReactNode,
   useEffect,
-  useImperativeHandle,
   useRef,
   useState,
 } from "react";
@@ -12,10 +11,6 @@ import { randomString } from ":/utils";
 import { Field, FieldProps } from ":/components/Forms/Field";
 import { LabelledBox } from ":/components/Forms/LabelledBox";
 
-export interface InputRefType {
-  input: HTMLInputElement | null;
-}
-
 type Props = InputHTMLAttributes<HTMLInputElement> &
   FieldProps & {
     label?: string;
@@ -25,7 +20,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> &
     charCounterMax?: number;
   };
 
-export const Input = forwardRef<InputRefType, Props>(
+export const Input = forwardRef<HTMLInputElement, Props>(
   (
     {
       className,
@@ -48,8 +43,7 @@ export const Input = forwardRef<InputRefType, Props>(
     if (className) {
       classes.push(className);
     }
-
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef<HTMLInputElement | null>(null);
     const [inputFocus, setInputFocus] = useState(false);
     const [value, setValue] = useState(defaultValue || props.value || "");
     const [labelAsPlaceholder, setLabelAsPlaceholder] = useState(!value);
@@ -78,12 +72,6 @@ export const Input = forwardRef<InputRefType, Props>(
       setValue(props.value || "");
     }, [props.value]);
 
-    useImperativeHandle(ref, () => ({
-      get input() {
-        return inputRef.current;
-      },
-    }));
-
     return (
       <Field
         state={state}
@@ -130,7 +118,16 @@ export const Input = forwardRef<InputRefType, Props>(
                 setValue(e.target.value);
                 props.onChange?.(e);
               }}
-              ref={inputRef}
+              ref={(inputTextRef) => {
+                if (ref) {
+                  if (typeof ref === "function") {
+                    ref(inputTextRef);
+                  } else {
+                    ref.current = inputTextRef;
+                  }
+                }
+                inputRef.current = inputTextRef;
+              }}
             />
           </LabelledBox>
           {!!rightIcon && (