Skip to content

Double render of custom DateTime component #137

@Kzazagzo

Description

@Kzazagzo

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:

  1. First render: value: undefined, ref: null
  2. 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

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions