How create a Select component from dynamically computed options

[bnussman-akamai]

Can an example be provided or can some documentation be added that shows how you would create a <select> component, in which, the options come from some extra async API. All of the examples I see use constant known values.

[iway1]

I think you'd need to use a string field for this, I don't think typescript will like using an enum field with non-constant values.

Something like this will work (I haven't ran this exact code but this approach is possible):

function Select({enumValues}:{enumValues: string[]}) {
  const {field} = useTsController<string>();
  return (
    <select onChange={e=>field.onChange(e.target.value)}>
      {options.map(e=><option/>)}
    </select>
  )
} 

const mapping = [
  [z.string(), Select],
] as const

const Form = createTsForm(mapping);

const Schema = z.object({
  select: z.string(),
})

const Page() {
  return (
    <Form 
      schema={Schema} 
      onSubmit={(e)=>{}}
      props={{
        select: {enumValues}
      }}
    />
  )
}

Thanks for bringing this up. I'm going to look into some of the enum related stuff tomorrow, starting to reconsider whether it's a good idea to have the useEnumValues hook/functionality at all 🤔 Seems to be a cause for confusion at the moment.

[iway1]

I'm leaning towards removing enums in a major version and recommending string schemas for dropdowns by default going forward. I just removed them from the docs.

Sorry for any confusion that caused - trying my best to make the API as easy to understand as possible and I'm still iterating on it. Your feedback is super helpful in allowing me to identify its current issues, so thank you!

@bnussman-akamai

EDIT: Enums deprecated, but still available for now. Recommend using z.string() instead