chore: update app inputs to use getInputProps

airjp73 · Jan 16, 2022 · dbffbeb · dbffbeb
1 parent a5991e6
commit dbffbeb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 32 deletions.
diff --git a/apps/docs/app/components/FormInput.tsx b/apps/docs/app/components/FormInput.tsx
@@ -20,8 +20,7 @@ export const FormInput: FC<
   onChange,
   ...rest
 }) => {
-  const { error, clearError, validate, defaultValue } =
-    useField(name);
+  const { error, getInputProps } = useField(name);
 
   return (
     <div className={className}>
@@ -40,22 +39,18 @@ export const FormInput: FC<
       </div>
       <div className="mt-1 relative flex rounded-md shadow-sm">
         <input
-          type="text"
-          name={name}
-          id={name}
-          className={classNames(
-            "border focus:ring-teal-500 focus:border-teal-500 focus:z-10 block w-full sm:text-sm text-black pr-10",
-            "rounded-md p-2",
-            error &&
-              "border-red-800 bg-red-50 text-red-800 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500"
-          )}
-          onChange={(event) => {
-            if (error) clearError();
-            onChange?.(event);
-          }}
-          onBlur={validate}
-          defaultValue={defaultValue}
-          {...rest}
+          {...getInputProps({
+            onChange,
+            id: name,
+            type: "text",
+            className: classNames(
+              "border focus:ring-teal-500 focus:border-teal-500 focus:z-10 block w-full sm:text-sm text-black pr-10",
+              "rounded-md p-2",
+              error &&
+                "border-red-800 bg-red-50 text-red-800 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500"
+            ),
+            ...rest,
+          })}
         />
         {error && (
           <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">

diff --git a/apps/sample-app/app/components/FormInput.tsx b/apps/sample-app/app/components/FormInput.tsx
@@ -19,19 +19,17 @@ export const FormInput = ({
   isRequired,
   ...rest
 }: FormInputProps & InputProps) => {
-  const { validate, clearError, defaultValue, error } = useField(name);
+  const { getInputProps, error } = useField(name);
 
   return (
     <>
       <FormControl isInvalid={!!error} isRequired={isRequired}>
         <FormLabel htmlFor={name}>{label}</FormLabel>
         <Input
-          id={name}
-          name={name}
-          onBlur={validate}
-          onChange={clearError}
-          defaultValue={defaultValue}
-          {...rest}
+          {...getInputProps({
+            id: name,
+            ...rest,
+          })}
         />
         {error && <FormErrorMessage>{error}</FormErrorMessage>}
       </FormControl>

diff --git a/apps/sample-app/app/components/FormSelect.tsx b/apps/sample-app/app/components/FormSelect.tsx
@@ -19,17 +19,15 @@ export const FormSelect = ({
   isRequired,
   ...rest
 }: FormSelectProps & SelectProps) => {
-  const { validate, clearError, defaultValue, error } = useField(name);
+  const { getInputProps, error } = useField(name);
   return (
     <FormControl isInvalid={!!error} isRequired={isRequired}>
       <FormLabel htmlFor={name}>{label}</FormLabel>
       <Select
-        id={name}
-        name={name}
-        onBlur={validate}
-        onChange={clearError}
-        defaultValue={defaultValue}
-        {...rest}
+        {...getInputProps({
+          id: name,
+          ...rest,
+        })}
       />
       {error && <FormErrorMessage>{error}</FormErrorMessage>}
     </FormControl>