fix: shadcn Select and FieldWrapper component

Author: adityacodepublic

package-lock.json

@@ -12,6 +12,7 @@ export const FieldWrapper: React.FC<FieldWrapperProps> = ({
   error,
 }) => {
   const isDisabled = DISABLED_LABELS.includes(field.type);
+  const hideError = ["array", "object"].includes(field.type);
 
   return (
     <div className="space-y-2">
@@ -27,7 +28,9 @@ export const FieldWrapper: React.FC<FieldWrapperProps> = ({
           {field.fieldConfig.description}
         </p>
       )}
-      {error && <p className="text-sm text-destructive">{error}</p>}
+      {!hideError && error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
     </div>
   );
 };

packages/shadcn/src/components/ui/autoform/components/FieldWrapper.tsx

@@ -7,31 +7,29 @@ import {
 } from "@/components/ui/select";
 import { AutoFormFieldProps } from "@autoform/react";
 import React from "react";
+import { useController } from "react-hook-form";
 
 export const SelectField: React.FC<AutoFormFieldProps> = ({
   field,
   inputProps,
   error,
   id,
 }) => {
-  const { key, ...props } = inputProps;
+  const { key, onChange, onBlur, ref, ...props } = inputProps;
+  const { field: formField } = useController({ name: id });
 
   return (
     <Select
+      onValueChange={formField.onChange}
+      value={formField.value}
       {...props}
-      onValueChange={(value) => {
-        const syntheticEvent = {
-          target: {
-            value,
-            name: field.key,
-          },
-        } as React.ChangeEvent<HTMLInputElement>;
-        props.onChange(syntheticEvent);
-      }}
-      defaultValue={field.default}
     >
-      <SelectTrigger id={id} className={error ? "border-destructive" : ""}>
-        <SelectValue placeholder="Select an option" />
+      <SelectTrigger
+        id={id}
+        {...formField}
+        className={error ? "border-destructive" : ""}
+      >
+        <SelectValue placeholder={props.placeholder ?? "Select an option"} />
       </SelectTrigger>
       <SelectContent>
         {(field.options || []).map(([key, label]) => (