Fix useCallback bug & date convertion bug

Author: CodeStix

src/Field.tsx

@@ -18,7 +18,7 @@ export type FieldProps<T extends object, K extends keyof T, C> = {
 };
 
 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" | "onChange" | keyof FieldProps<T, K, C> | keyof SerializeProps> & SerializeProps
+    props: FieldProps<T, K, C> & Omit<ElementProps<C>, "value" | "onChange" | keyof FieldProps<T, K, C> | keyof SerializeProps> & SerializeProps<T[K]>
 ) {
     const { form, as = "input", serializer, dateAsNumber, setNullOnUncheck, setUndefinedOnUncheck, deserializer, hideWhenNull, ...rest } = props;
     const serializeProps = {
@@ -32,16 +32,17 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
     const onChange = useCallback(
         (ev: any) => {
             let v = "target" in ev ? (["checkbox", "radio"].includes(props.type!) ? ev.target.checked : ev.target.value) : ev;
-            setValue((deserializer ?? defaultDeserializer)(v, value, serializeProps));
+            if (typeof v === "string" || typeof v === "boolean") setValue((deserializer ?? defaultDeserializer)(v, value, serializeProps));
+            else setValue(v);
         },
-        [setValue]
+        [setValue, props.type]
     );
     if (hideWhenNull && (value === undefined || value === null)) return null;
     let v = (serializer ?? defaultSerializer)(value, serializeProps);
     return React.createElement(as, {
         ...rest,
         checked: typeof v === "boolean" ? v : undefined,
-        value: typeof v === "boolean" ? undefined : value,
+        value: typeof v === "boolean" ? undefined : v,
         disabled: state.isSubmitting,
         onChange
     });
@@ -73,10 +74,10 @@ export type SerializeProps<V = any> = {
     setUndefinedOnUncheck?: boolean;
     setNullOnUncheck?: boolean;
     type?: SerializeType;
-    value?: V;
+    value?: V extends any[] ? V[number] : V;
 };
 
-export function defaultSerializer<T>(currentValue: T, props: SerializeProps<T>): boolean | string {
+function defaultSerializer<T>(currentValue: T, props: SerializeProps<T>): boolean | string {
     switch (props.type) {
         case "datetime-local":
         case "date": {
@@ -112,7 +113,7 @@ export function defaultSerializer<T>(currentValue: T, props: SerializeProps<T>):
     }
 }
 
-export function defaultDeserializer<T>(inputValue: string | boolean, currentValue: T, props: SerializeProps<T>) {
+function defaultDeserializer<T>(inputValue: string | boolean, currentValue: T, props: SerializeProps<T>) {
     switch (props.type) {
         case "number": {
             return parseFloat(inputValue as any);

src/hooks.ts

@@ -82,7 +82,6 @@ export function useListener<T extends object, K extends keyof T, State = Default
     name: K
 ) {
     const [, setRender] = useState(0);
-    const setValue = useCallback((value: T[K]) => form.setValue(name, value), [name, form]);
 
     useEffect(() => {
         let id = form.listen(name, () => {
@@ -94,7 +93,7 @@ export function useListener<T extends object, K extends keyof T, State = Default
     return {
         value: form.values[name],
         defaultValue: form.defaultValues[name],
-        setValue: setValue,
+        setValue: (value: T[K]) => form.setValue(name, value),
         dirty: form.dirtyMap[name],
         error: form.errorMap[name],
         state: form.state,

testing/src/ExampleForm.tsx

@@ -79,7 +79,7 @@ export function ExampleForm() {
 
             {/* A simple text input */}
             <label>Deserializer text</label>
-            <Field form={form} name="customText" serializer={(e) => e?.toLowerCase()} deserializer={(e) => e.toUpperCase()} />
+            <Field form={form} name="customText" serializer={(e) => e?.toLowerCase()} deserializer={(e) => (e as string).toUpperCase()} />
             <pre>{`<Field form={form} name="fieldName" />`}</pre>
 
             {/* A textarea */}