do not send empty data

Parts/Input.tsx

@@ -23,13 +23,23 @@ export default function Input(
     title?: string;
     children?: React.ReactNode;
     className?: string;
+    sendEmpty?: boolean;
   }
 ) {
   /*name, id*/
-  let { children, ...otherProps } = props;
+  let { children, sendEmpty = false, ...otherProps } = props;
 
   const [field, meta, helpers] = useField(otherProps);
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (otherProps.onChange) {
+      otherProps.onChange(e);
+      return;
+    }
+    const val = (!sendEmpty && e.target.value === "") ? null : e.target.value;
+    field.onChange({ target: { value: val, name: field.name } });
+  };
+
   return (
     <div css={[props.title && tw`my-1`, tw`relative`]} className={props.className}>
       {props.title && (
@@ -46,6 +56,8 @@ export default function Input(
       <input
         id={props.id ?? props.name ?? props.title}
         {...field}
+        value={field.value ?? ""}
+        onChange={handleChange}
         {...otherProps as any}
         tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "
       />
@@ -65,10 +77,11 @@ export function MaskedInput(
     title?: string;
     children?: React.ReactNode;
     className?: string;
+    sendEmpty?: boolean;
   }
 ) {
   /*name, id*/
-  let { children, validate, ...otherProps } = props;
+  let { children, validate, sendEmpty = false, ...otherProps } = props;
 
   const [field, meta, helpers] = useField({ ...otherProps, validate });
 
@@ -88,10 +101,13 @@ export function MaskedInput(
       <IMaskInput
         //id={props.id ?? props.name ?? props.title}        
         {...otherProps as any}
-        value={field.value}
+        value={field.value ?? ""}
         unmask="typed"
         onAccept={
-          (value, mask) => field.onChange({ target: { value, name: field.name } })
+          (value, mask) => {
+            const val = (!sendEmpty && value === "") ? null : value;
+            field.onChange({ target: { value: val, name: field.name } });
+          }
         }
         onBlur={field.onBlur}
         tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "
@@ -108,11 +124,26 @@ export function TextArea({
   title,
   children = null,
   label = null,
+  sendEmpty = false,
   ...props
+}: {
+  title?: string;
+  children?: React.ReactNode;
+  label?: any;
+  sendEmpty?: boolean;
+  [key: string]: any;
 }) {
-
   const [field, meta, helpers] = useField(props);
 
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (props.onChange) {
+      props.onChange(e);
+      return;
+    }
+    const val = (!sendEmpty && e.target.value === "") ? null : e.target.value;
+    field.onChange({ target: { value: val, name: field.name } });
+  };
+
   return (
     <div css={[title && tw`my-1`]} >
       {title && (
@@ -127,6 +158,8 @@ export function TextArea({
       <textarea
         {...props}
         {...field}
+        value={field.value ?? ""}
+        onChange={handleChange}
         tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "
       />
       {children}