innerRef prop on Field/FieldError

Author: CodeStix

Todo.md

@@ -2,6 +2,5 @@
 -   Nested validators in child forms to improve validation performance
 -   Combine array helpers into one object? This is usefull to pass to other components
 -   Require index for array fields
--   Add React.forwardRef to input elements
--   Let `comparePrimitiveObject` compare deep objects too
 -   Field on blur
+-   Use React.forwardRef instead of innerRef on Field/FieldError

src/Field.tsx

@@ -14,7 +14,7 @@ export type FieldProps<T extends object, K extends keyof T, C> = {
      */
     form: FormState<T>;
     /**
-     * The name of the field
+     * The name of the field in form
      */
     name: K;
     /**
@@ -59,11 +59,17 @@ export type FieldProps<T extends object, K extends keyof T, C> = {
      * The style to set when this field has been modified.
      */
     dirtyStyle?: React.CSSProperties;
+    /**
+     * The ref to pass to your input component.
+     */
+    innerRef?: React.Ref<any>;
 };
 
+// Note on innerRef: React.forwardRef breaks type-checking
+
 export function Field<T extends object, K extends keyof T, C extends React.FunctionComponent<any> | keyof JSX.IntrinsicElements = "input">(
     props: FieldProps<T, K, C> &
-        Omit<ElementProps<C>, "value" | "checked" | "onChange" | "field" | keyof FieldProps<T, K, C> | keyof SerializeProps> &
+        Omit<ElementProps<C>, "value" | "checked" | "onChange" | "field" | "ref" | keyof FieldProps<T, K, C> | keyof SerializeProps> &
         SerializeProps<T[K]>
 ) {
     const {
@@ -82,6 +88,7 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
         errorStyle,
         dirtyClassName,
         dirtyStyle,
+        innerRef,
         ...rest
     } = props;
     const serializeProps = {
@@ -96,6 +103,7 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
     let v = (serializer ?? defaultSerializer)(field.value, serializeProps);
     return React.createElement(as, {
         ...rest,
+        ref: innerRef,
         checked: typeof v === "boolean" ? v : undefined,
         value: typeof v === "boolean" ? undefined : v,
         disabled: field.state.isSubmitting || disabled,
@@ -104,7 +112,11 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
         field,
         onChange: (ev: any) => {
             let v =
-                typeof ev === "object" && "target" in ev ? (["checkbox", "radio"].includes(props.type!) ? ev.target.checked : ev.target.value) : ev;
+                typeof ev === "object" && "target" in ev
+                    ? props.type === "checkbox" || props.type === "radio"
+                        ? ev.target.checked
+                        : ev.target.value
+                    : ev;
             if (typeof v === "string" || typeof v === "boolean")
                 field.setValue((deserializer ?? defaultDeserializer)(v, field.value, serializeProps));
             else field.setValue(v);

src/FieldError.tsx

@@ -30,10 +30,14 @@ export function FieldError<
          */
         as?: C;
         transformer?: (error: ErrorType<T[K], Error>) => React.ReactNode;
-    } & Omit<ElementProps<C>, "transformer" | "as" | "name" | "form" | "children" | "field">
+        /**
+         * The ref to pass to your error component.
+         */
+        innerRef?: React.Ref<any>;
+    } & Omit<ElementProps<C>, "transformer" | "as" | "name" | "form" | "children" | "field" | "ref">
 ) {
-    const { form, as = React.Fragment, transformer, ...rest } = props;
+    const { form, as = React.Fragment, transformer, innerRef, ...rest } = props;
     const field = useListener(form, props.name);
     if (!field.error || typeof field.error === "object") return null;
-    return React.createElement(as, { ...rest, field, children: transformer ? transformer(field.error) : String(field.error) });
+    return React.createElement(as, { ...rest, ref: innerRef, field, children: transformer ? transformer(field.error) : String(field.error) });
 }

testing/src/Fieldform.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import { useForm, Field, AnyListener } from "typed-react-form";
 
 const inputStyle: React.CSSProperties = {
@@ -13,6 +13,7 @@ function CustomInput(props: { value: string; onChange: (val: string) => void; my
 
 export function FieldForm() {
     const form = useForm({ firstName: "", lastName: "" });
+    const inputRef = useRef<HTMLInputElement>(null);
 
     function submit() {
         console.log(form.values);
@@ -22,6 +23,7 @@ export function FieldForm() {
         <form onSubmit={form.handleSubmit(submit)}>
             <Field form={form} name="firstName" as={CustomInput} myCustomProp={true} />
             <Field form={form} name="lastName" as={CustomInput} />
+            <Field form={form} name="firstName" innerRef={inputRef} />
             <button type="submit">Go</button>
             <button
                 type="button"
@@ -32,6 +34,14 @@ export function FieldForm() {
                 Set values
             </button>
             <AnyListener form={form} render={({ dirty }) => <pre>{String(dirty)}</pre>} />
+            <button
+                type="button"
+                onClick={() => {
+                    inputRef.current!.style.color = Math.random() > 0.5 ? "red" : "blue";
+                }}
+            >
+                Test
+            </button>
         </form>
     );
 }