-
Notifications
You must be signed in to change notification settings - Fork 143
Description
Description
When implementing a custom DateTime component with Zod schema integration, the field is being rendered twice during form initialization. This occurs specifically with a custom DateTimePicker component (tested with shadcn-ui-expansions and other DateTime components).
Current Behavior
The field renders twice with the following pattern:
- First render:
value: undefined
,ref: null
- Second render: Correct value and field reference
While only the first version of field is visible in the form UI, the double rendering pattern persists, leaving the field uninitialized despite having the date in proper iso format
Implementation Details
Using AutoForm with custom DateTime component registration:
<AutoForm
schema={scenarioForm}
defaultValues={scenario}
onSubmit={onSubmit}
formComponents={{
dateTime: DateTimePicker,
}}
/>
with following zustom zod type
export const createDateTime = () =>
z.coerce
.string()
.datetime()
.superRefine(
fieldConfig({
fieldType: 'dateTime',
}),
);
Expected Behavior
The component should render once with the correct value and reference.
Enviroment
- DateTimePicker from shadcn-ui-expansions
- Schema Validation: Zod
Aditional context
This behavior has been reproduced with multiple DateTime component implementations (both custom and third-party).
I've tried different approaches to handle the DateTime type:
- changing to
coerce.date()
- transforming
date => date.toISOString()
In all cases, the format is correct (ISO format) but the double rendering persists. The only cases where this issue doesn't occur is when:
- displaying date as string using StringField component
- converting to plain date and using DateField component
I can prepare a test repository with reproduction if needed.