Dropdown in Array Field is always showing undefined

[vbhanuc87]

Hi There,

I am having an issue when using shadcn/ui components and autoform to render a form based on zodSchema, that has an element with object array.

The form is rendering as expected, however, while saving the form - the value for dropdown field is always undefined, though a value is chosen in the dropdown.

const schema = z.object({
name: z.string(),
contacts: z.array(z.object({
type: z.enum(['email', 'phone', 'fax', 'other']).default('email'),
value: z.string(),
label: z.string().optional(),
}))
});

Submit values received:

Appreciate any help in this regards. I was combing through the code, but couldn't find the root cause for this.

[adityacodepublic]

try using this select component

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} 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, onChange, onBlur, ref, ...props } = inputProps;
  const { field: formField } = useController({ name: id });

  return (
    <Select
      onValueChange={formField.onChange}
      value={formField.value}
      {...props}
    >
      <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={label}>
            {label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};