Closed aaronadamsCA closed 1 day ago
This is a tricky one 😅 As checkbox does not contribute to the FormData unless it is checked, there is no way Conform can construct the flags object. It is basically sending an empty object to zod and zod stop parsing the details of flags
as soon as it finds that flags
is not defined.
This would not be an issue if you have a text input inside the flags object, so Conform manages to construct an object even nothing is filled, or if you mark the flag itself as optional (No. This won't work with how zod works).
I wonder if this is something safe to do with automatic type coercion
const schema = z.object({
flags: z.preprocess(value => {
if (typeof value !== 'undefined') {
return value;
}
// Set it a default object if it's not available
return {};
}, z.object({
one: z.boolean(),
two: z.boolean(),
}),
});
Yeah, this actually came up by accident—I forgot to append I almost wasn't going to report it until I realized it may have other more significant effects..default(false)
to my z.boolean()
fields, and the form was silently failing—no validation, no visible errors.
Your suggested solution looks sound to me, I can't imagine any reason it would be dangerous to default every object in a schema to empty (though I'm hardly an expert in this kind of thing!).
Edit: It turns out this issue can occur whether your boolean fields are optional or required.
I think the value should default to an empty object only if the object schema is required. If the object is optional, we should keep it as is.
I agree! I do have at least one use case where I might want to explicitly mark an object as .optional()
, and it would be nice if that were still an option.
I updated the StackBlitz to show two different workarounds for two different scenarios.
.default({})
to the object.z.preprocess()
the fieldset object using the Object()
constructor, which will create and return an empty object if the value is null
or undefined
(unfortunately Zod lacks a z.coerce.object()
to simplify this).Note this existing feature request for z.coerce.object()
: https://github.com/colinhacks/zod/issues/2786
I've come up with my own coerceObject()
helper that appears to be working well.
function coerceObject<T extends z.ZodRawShape>(
shape: T,
params?: z.RawCreateParams,
) {
return new z.ZodEffects({
schema: z.object(shape, params),
effect: { type: "preprocess", transform: Object },
typeName: z.ZodFirstPartyTypeKind.ZodEffects,
});
}
Here it is with an explicit function return type:
Benefits:
Object
constructor.
null
and undefined
the result is an empty object.z.preprocess()
this preserves the input type.
.transform
, since useForm<z.input<typeof schema>, z.output<typeof schema>>()
will still work for correctly typing defaultValue
and onValidate
separately.Limitations:
ZodEffects
, the schema can no longer be extended or merged.@edmundhung, I'm happy to contribute this helper to Conform's Zod package along with some tests and docs, as it solves a large pain point while Zod v3 remains frozen (and v4 in progress). Just let me know if you're interested and I'll try to get to it soon.
Thanks for the offer @aaronadamsCA. I think it would be better to stay consistent with the current approach in which we will coerce the object automatically. (I have plan to make the schema integration less coupled so we might want this in the future, let's see.)
For now, #733 should resolve the issue.
Agreed, it looks like a good solution. I just hope there are no use cases that depend on an undefined object remaining undefined! But I can't think of any.
(On the topic of "schema integration less coupled", I've often imagined a factory that could return a parseWithZod
instance with custom "when you see [this schema], run [this transformer]" schema preprocessing instructions. Even better if I could override built-in coercions, e.g. I'd prefer to convert empty strings to null
. I don't know if that's the kind of thing you had in mind, but if so—great!)
Describe the bug and the expected behavior
If all of the fields in a fieldset are missing, the error is unexpectedly "hoisted" from each field to the fieldset.
Conform version
1.0.0-rc.0
Steps to Reproduce the Bug or Issue
https://stackblitz.com/edit/remix-run-remix-zhkgb3?file=app%2Froutes%2Fworkaround.2.tsx
Expected result:
Actual result:
Errors at the fieldset level are unexpected, and most forms won't know how to render these.
What browsers are you seeing the problem on?
No response
Screenshots or Videos
No response
Additional context
No response