ciscoheat / sveltekit-superforms

Making SvelteKit forms a pleasure to use!
https://superforms.rocks
MIT License
2.25k stars 65 forks source link

Zod union literals with descriptions break the form in form actions #495

Closed PeytonHanel closed 1 week ago

PeytonHanel commented 3 weeks ago

Description

I have a zod schema with union literals. I put a description on each one and it breaks my superfroms.

export const schema = z.object({
  thingy: z.union([
    z.literal('first').describe('The first one.'),
    z.literal('second').describe('The second one.'),

Once I submit a form to a form action, I will either get an error or the form will receive an empty string instead of the actual selected value. I'm using radio buttons

<input type='radio' bind:group={$form.thingy} value='first' name='thingy'> First
<input type='radio' bind:group={$form.thingy} value='second' name='thingy'> Second

If you remove the name attributes, you get the empty string. If you keep them then you get the error.

image

If applicable, a MRE

I'm not really sure how to use the provided sveltelab link and I had already made a minimal reproducible example here: https://gitlab.com/peytonhanel/superforms-zod-describe-bug

It will print stuff to the console to help you see what's going on.

ciscoheat commented 1 week ago

I see that in the example, you're using use:enhance from SvelteKit, not from superForm. You need to use the Superforms provided one, and one of the events for the validation result, then it will probably work.