Fixed in operator error bug

Author: CodeStix

docs/_config.yml

@@ -1,6 +1,6 @@
-# theme: "just-the-docs"
-# baseurl: "/typed-react-form"
-remote_theme: pmarsceill/just-the-docs
+theme: "just-the-docs"
+baseurl: "/typed-react-form"
+# remote_theme: pmarsceill/just-the-docs
 
 aux_links:
     "GitHub":

docs/index.md

@@ -36,6 +36,13 @@ function MyForm() {
 }
 ```
 
+<iframe src="https://codesandbox.io/embed/basic-typed-react-form-example-zz7uw?fontsize=14&hidenavigation=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="basic typed-react-form example"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
 ### Creating the submit handler
 
 Use `form.handleSubmit` to validate before calling your function. It does not get called if there is a validation error, and prevents the page from reloading.

src/Field.tsx

@@ -103,7 +103,8 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
         style: { ...style, ...(field.dirty ? dirtyStyle : {}), ...(field.error ? errorStyle : {}) },
         field,
         onChange: (ev: any) => {
-            let v = "target" in ev ? (["checkbox", "radio"].includes(props.type!) ? ev.target.checked : ev.target.value) : ev;
+            let v =
+                typeof ev === "object" && "target" in ev ? (["checkbox", "radio"].includes(props.type!) ? 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);

testing/src/Fieldform.tsx

@@ -1,36 +1,27 @@
 import React from "react";
-import { useForm, Field, FormField } from "typed-react-form";
+import { useForm, Field } from "typed-react-form";
 
-function CustomInput(props: { value: any; onChange: React.ChangeEventHandler; style?: React.CSSProperties; className?: string; field: FormField }) {
-    return (
-        <input
-            value={props.value}
-            onChange={props.onChange}
-            style={{ ...props.style, padding: "0.3em", color: props.field.error ? "yellow" : "unset" }}
-            className={props.className}
-        />
-    );
+const inputStyle: React.CSSProperties = {
+    color: "gray",
+    padding: "0.3em"
+};
+
+// value and onChange are handled by the Field component
+function CustomInput(props: { value: string; onChange: (val: string) => void; myCustomProp?: boolean }) {
+    return <input style={inputStyle} value={props.value} onChange={(ev) => props.onChange(ev.target.value)} />;
 }
 
-export function FieldForm() {
-    const form = useForm({ nice: "" }, (values) => ({ nice: values.nice.length < 5 ? "Must be longer" : undefined }));
+export default function ExampleForm() {
+    const form = useForm({ firstName: "", lastName: "" });
 
     function submit() {
         console.log(form.values);
-        form.setDefaultValues(form.values);
     }
 
     return (
         <form onSubmit={form.handleSubmit(submit)}>
-            <Field
-                form={form}
-                name="nice"
-                as={CustomInput}
-                style={{ color: "gray", fontSize: "2em" }}
-                className="blink"
-                dirtyStyle={{ fontWeight: "bold" }}
-                errorStyle={{ color: "red" }}
-            />
+            <Field form={form} name="firstName" as={CustomInput} myCustomProp={true} />
+            <Field form={form} name="lastName" as={CustomInput} />
             <button type="submit">Go</button>
         </form>
     );