fix input props passthrough

src/components/atoms/Input/InputElement.tsx

@@ -10,9 +10,16 @@ const DefaultInput = (props: InputProps) => (
   <input className={styles.input} id={props.name} {...props} />
 )
 
-export default function InputElement(props: InputProps): ReactElement {
-  const { type, options, name, prefix, postfix, small, field } = props
-
+export default function InputElement({
+  type,
+  options,
+  name,
+  prefix,
+  postfix,
+  small,
+  field,
+  ...props
+}: InputProps): ReactElement {
   switch (type) {
     case 'select':
       return (
@@ -35,7 +42,9 @@ export default function InputElement(props: InputProps): ReactElement {
         </select>
       )
     case 'textarea':
-      return <textarea id={name} className={styles.input} {...props} />
+      return (
+        <textarea name={name} id={name} className={styles.input} {...props} />
+      )
     case 'radio':
     case 'checkbox':
       return (
@@ -47,6 +56,7 @@ export default function InputElement(props: InputProps): ReactElement {
                   className={styles.radio}
                   id={slugify(option)}
                   type={type}
+                  name={name}
                   {...props}
                 />
                 <label className={styles.radioLabel} htmlFor={slugify(option)}>
@@ -57,20 +67,20 @@ export default function InputElement(props: InputProps): ReactElement {
         </div>
       )
     case 'files':
-      return <FilesInput {...props} />
+      return <FilesInput name={name} {...field} {...props} />
     case 'price':
-      return <Price {...props} />
+      return <Price name={name} {...field} {...props} />
     case 'terms':
-      return <Terms {...props} />
+      return <Terms name={name} options={options} {...field} {...props} />
     default:
       return prefix || postfix ? (
         <div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}>
           {prefix && <div className={styles.prefix}>{prefix}</div>}
-          <DefaultInput type={type || 'text'} {...props} />
+          <DefaultInput name={name} type={type || 'text'} {...props} />
           {postfix && <div className={styles.postfix}>{postfix}</div>}
         </div>
       ) : (
-        <DefaultInput type={type || 'text'} {...props} />
+        <DefaultInput name={name} type={type || 'text'} {...props} />
       )
   }
 }

src/components/atoms/Input/index.tsx

@@ -42,7 +42,15 @@ export interface InputProps {
 }
 
 export default function Input(props: Partial<InputProps>): ReactElement {
-  const { required, name, label, help, additionalComponent, field } = props
+  const {
+    required,
+    name,
+    label,
+    help,
+    additionalComponent,
+    small,
+    field
+  } = props
 
   const hasError =
     props.form &&
@@ -62,7 +70,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
       <Label htmlFor={name} required={required}>
         {label}
       </Label>
-      <InputElement {...field} {...props} />
+      <InputElement small={small} {...field} {...props} />
 
       {field && (
         <div className={styles.error}>