refactor: pass props through getInputProps

airjp73 · Jun 25, 2024 · e2d3ecc · e2d3ecc
1 parent fb9e989
commit e2d3ecc
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 28 deletions.
diff --git a/apps/docs-v2/app/routes/_docs.input-types.mdx b/apps/docs-v2/app/routes/_docs.input-types.mdx
@@ -278,7 +278,7 @@ Like when observing the values, the value will always be a `string`. The excepti
     </select>
 
     // multi select
-    <select multiple {...form.getInputProps("mySelect")}>
+    <select {...form.getInputProps("mySelect", { multiple: true })}>
       <option value="foo">Foo</option>
       <option value="bar">Bar</option>
       <option value="baz">Baz</option>

diff --git a/apps/test-app/app/components/Input.tsx b/apps/test-app/app/components/Input.tsx
@@ -36,10 +36,10 @@ export const Input = forwardRef(
         <label htmlFor={field.name()}>{label}</label>
         <input
           data-testid={dataTestId}
-          id={field.name()}
-          disabled={disabled}
-          form={form}
           {...field.getInputProps({
+            form,
+            disabled,
+            id: field.name(),
             type,
             value,
             ref,

diff --git a/apps/test-app/app/components/InputWithTouched.tsx b/apps/test-app/app/components/InputWithTouched.tsx
@@ -13,9 +13,8 @@ export const InputWithTouched = forwardRef(
       <div>
         <label htmlFor={name}>{label}</label>
         <input
-          id={name}
-          name={name}
           {...field.getInputProps({
+            id: name,
             ref,
           })}
         />

diff --git a/apps/test-app/app/components/Select.tsx b/apps/test-app/app/components/Select.tsx
@@ -20,11 +20,7 @@ export const Select: FC<SelectProps> = ({
     <>
       <label>
         {label}
-        <select
-          {...getInputProps()}
-          multiple={multiple}
-          data-testid={dataTestId}
-        >
+        <select {...getInputProps({ multiple })} data-testid={dataTestId}>
           {children}
         </select>
         {error() && <p>{error()}</p>}

diff --git a/apps/test-app/app/components/Textarea.tsx b/apps/test-app/app/components/Textarea.tsx
@@ -18,8 +18,7 @@ export const Textarea: FC<TextareaProps> = ({
     <>
       <label htmlFor={name}>{label}</label>
       <textarea
-        id={name}
-        {...getInputProps()}
+        {...getInputProps({ id: name })}
         data-testid={dataTestId}
       ></textarea>
       {error() && <p>{error()}</p>}

diff --git a/apps/test-app/app/routes/nested-defaults.tsx b/apps/test-app/app/routes/nested-defaults.tsx
@@ -15,11 +15,7 @@ const Switch = ({ name, label, "data-testid": dataTestId }: SwitchProps) => {
 
   return (
     <div>
-      <input
-        type="checkbox"
-        id={name}
-        {...getInputProps({ type: "checkbox" })}
-      />
+      <input {...getInputProps({ type: "checkbox", id: name })} />
       <label>{label}</label>
       <pre data-testid={dataTestId}>
         {JSON.stringify(getInputProps({ type: "checkbox" }), null, 2)}

diff --git a/apps/test-app/app/routes/occasional-field-tracking.tsx b/apps/test-app/app/routes/occasional-field-tracking.tsx
@@ -27,7 +27,6 @@ export default function OccasionalFieldTracking() {
     <form {...form.getFormProps()}>
       <input
         data-testid="occasional"
-        name="token"
         {...form.field("token").getInputProps()}
       />
     </form>

diff --git a/apps/test-app/app/routes/submission.aftersubmit.invalid.tsx b/apps/test-app/app/routes/submission.aftersubmit.invalid.tsx
@@ -38,7 +38,7 @@ const CustomInput = () => {
   return (
     <div>
       <label htmlFor="testinput">Test input</label>
-      <input {...getInputProps()} id="testinput" />
+      <input {...getInputProps({ id: "testinput" })} />
       {error() && <span style={{ color: "red" }}>{error()}</span>}
     </div>
   );

diff --git a/packages/react/src/test/files.test.tsx b/packages/react/src/test/files.test.tsx
@@ -184,8 +184,7 @@ it("should be possible to observe and clear the value of a multi-file input", as
       <form {...form.getFormProps()} encType="multipart/form-data">
         <input
           data-testid="file"
-          {...form.getInputProps("file", { type: "file" })}
-          multiple
+          {...form.getInputProps("file", { type: "file", multiple: true })}
         />
         <button
           data-testid="clear"

diff --git a/packages/react/src/test/uncontrolled.test.tsx b/packages/react/src/test/uncontrolled.test.tsx
@@ -914,8 +914,7 @@ it("should work with multi-selects", async () => {
         <form {...form.getFormProps()}>
           <select
             data-testid="foo"
-            multiple
-            {...form.field("foo").getInputProps()}
+            {...form.field("foo").getInputProps({ multiple: true })}
           >
             <option value="bar">Bar</option>
             <option value="baz">Baz</option>
@@ -965,8 +964,9 @@ it("multi-selects should be able to set the default value with multiple elements
         <form {...form.getFormProps()}>
           <select
             data-testid="foo"
-            multiple
-            {...form.field("foo").getInputProps()}
+            {...form.field("foo").getInputProps({
+              multiple: true,
+            })}
           >
             <option value="bar">Bar</option>
             <option value="baz">Baz</option>
@@ -1005,9 +1005,10 @@ it("should be posssible to set the value of an uncontrolled select", async () =>
       <>
         <form {...form.getFormProps()}>
           <select
-            multiple
             data-testid="foo"
-            {...form.field("foo").getInputProps()}
+            {...form.field("foo").getInputProps({
+              multiple: true,
+            })}
           >
             <option value="bar">Bar</option>
             <option value="baz">Baz</option>