fix: shadcn FieldWrapper and SelectField

tests: add shadcn v4, v3 tests (native Enum)

Author: adityacodepublic

apps/web/cypress/component/autoform/shadcn-zod/basic.cy.tsx

@@ -4,12 +4,21 @@ import { ZodProvider, fieldConfig } from "@autoform/zod";
 import { z } from "zod/v3";
 import { TestWrapper } from "./utils";
 
+enum Sports {
+  Football = "Football/Soccer",
+  Basketball = "Basketballs",
+  Baseball = "Baseballs",
+  Hockey = "Hockey (Ice)",
+  None = "I don't like sports",
+}
+
 describe("AutoForm Basic Tests (SHADCN-ZOD)", () => {
   const basicSchema = z.object({
     name: z.string().min(2, "Name must be at least 2 characters"),
     age: z.coerce.number().min(18, "Must be at least 18 years old"),
     email: z.string().email("Invalid email address"),
     website: z.string().url("Invalid URL").optional(),
+    sports: z.nativeEnum(Sports),
     birthdate: z.coerce.date(),
     isStudent: z.boolean(),
   });
@@ -31,6 +40,7 @@ describe("AutoForm Basic Tests (SHADCN-ZOD)", () => {
     cy.get('input[name="age"]').should("have.attr", "type", "number");
     cy.get('input[name="email"]').should("exist");
     cy.get('input[name="website"]').should("exist");
+    cy.get('button[name="sports"]').should("exist");
     cy.get('input[name="birthdate"]').should("exist");
     cy.get("button#isStudent").should("exist");
   });
@@ -47,6 +57,11 @@ describe("AutoForm Basic Tests (SHADCN-ZOD)", () => {
     cy.get('input[name="age"]').type("25");
     cy.get('input[name="email"]').type("[email protected]");
     cy.get('input[name="website"]').type("https://example.com");
+    cy.get('button[name="sports"]').should("exist").click();
+    cy.get('div[data-radix-collection-item][role="option"]')
+      .should("be.visible")
+      .contains("Hockey (Ice)")
+      .click();
     cy.get('input[name="birthdate"]').type("1990-01-01");
     cy.get("button#isStudent").click();
 
@@ -58,6 +73,7 @@ describe("AutoForm Basic Tests (SHADCN-ZOD)", () => {
       age: 25,
       email: "[email protected]",
       website: "https://example.com",
+      sports: "Hockey (Ice)",
       birthdate: new Date("1990-01-01"),
       isStudent: true,
     });

apps/web/cypress/component/autoform/shadcn-zod4/basic.cy.tsx

@@ -4,12 +4,21 @@ import { ZodProvider, fieldConfig } from "@autoform/zod";
 import { z } from "zod/v4";
 import { TestWrapper } from "./utils";
 
+enum Sports {
+  Football = "Football/Soccer",
+  Basketball = "Basketballs",
+  Baseball = "Baseballs",
+  Hockey = "Hockey (Ice)",
+  None = "I don't like sports",
+}
+
 describe("AutoForm Basic Tests (SHADCN-ZOD-V4)", () => {
   const basicSchema = z.object({
     name: z.string().min(2, "Name must be at least 2 characters"),
     age: z.coerce.number().min(18, "Must be at least 18 years old"),
     email: z.string().email("Invalid email address"),
     website: z.string().url("Invalid URL").optional(),
+    sports: z.enum(Sports),
     birthdate: z.coerce.date(),
     isStudent: z.boolean(),
   });
@@ -31,6 +40,7 @@ describe("AutoForm Basic Tests (SHADCN-ZOD-V4)", () => {
     cy.get('input[name="age"]').should("have.attr", "type", "number");
     cy.get('input[name="email"]').should("exist");
     cy.get('input[name="website"]').should("exist");
+    cy.get('button[name="sports"]').should("exist");
     cy.get('input[name="birthdate"]').should("exist");
     cy.get("button#isStudent").should("exist");
   });
@@ -47,6 +57,11 @@ describe("AutoForm Basic Tests (SHADCN-ZOD-V4)", () => {
     cy.get('input[name="age"]').type("25");
     cy.get('input[name="email"]').type("[email protected]");
     cy.get('input[name="website"]').type("https://example.com");
+    cy.get('button[name="sports"]').should("exist").click();
+    cy.get('div[data-radix-collection-item][role="option"]')
+      .should("be.visible")
+      .contains("Hockey (Ice)")
+      .click();
     cy.get('input[name="birthdate"]').type("1990-01-01");
     cy.get("button#isStudent").click();
 
@@ -58,6 +73,7 @@ describe("AutoForm Basic Tests (SHADCN-ZOD-V4)", () => {
       age: 25,
       email: "[email protected]",
       website: "https://example.com",
+      sports: "Hockey (Ice)",
       birthdate: new Date("1990-01-01"),
       isStudent: true,
     });

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,35 +7,33 @@ 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]) => (
-          <SelectItem key={key} value={key}>
+          <SelectItem key={key} value={label}>
             {label}
           </SelectItem>
         ))}