Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form starts as tainted with Zod enums and select elements #73

Closed
abastardi opened this issue Mar 25, 2023 · 6 comments
Closed

Form starts as tainted with Zod enums and select elements #73

abastardi opened this issue Mar 25, 2023 · 6 comments

Comments

@abastardi
Copy link

I have an address form with the state property of the Zod schema defined like:

	state: z.nativeEnum(State)

In the form, the state field is a select element with the first option defined as:

			<option value="">Select</option>

The problem is that superValidate generates undefined as the value of $form.state, but when bound to the select element, that immediately gets changed to the empty string, which marks the form as tainted. This means even without touching the form, if the user attempts to navigate away, they will see the taintedMessage alert.

To avoid this problem, it would be helpful to be able to specify the default value for enums as being the empty string rather than undefined (possibly via a configuration option). For example, the following schema works as expected:

	state: z.nativeEnum(State).or(z.literal('')).default(''),

Of course, it's not ideal to have to specify the schema that way, as it is not obvious why it is written that way, and technically it would allow an empty string to be submitted even though that value should not be allowed.

Would adding an option to handle this case be possible, or is there a better solution?

@ciscoheat
Copy link
Owner

That's a good catch. As a workaround until I've examined this better, does this work?

z.nativeEnum(State).default('' as State)

@abastardi
Copy link
Author

Nice idea -- yes, that works. Thanks.

@ciscoheat
Copy link
Owner

ciscoheat commented Mar 26, 2023

Great! There's a note about this (ab)use of the type system here: https://superforms.vercel.app/default-values#changing-a-default-value

@ciscoheat
Copy link
Owner

Closing this, I think the workaround is the only thing to do if the general type safety of the library is to be kept.

@abastardi
Copy link
Author

Note, it might be worth mentioning this issue and the workaround in the Tainted form check section of the docs, as it may not be obvious to users why they are getting the taintedMessage alert unexpectedly (there is no clear indication that the <select> is what is tainted nor why it has become tainted, so it won't be obvious that this workaround is even needed).

@ciscoheat
Copy link
Owner

Yes, will add that to the docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants