DateField hidden input is not getting a value when name is passed

[igorlanko]

I have my own DateField component wrapper, looking like so:

// DateField.svelte <script lang="ts">  import { DateField } from 'bits-ui'  import type { DateValue } from '@internationalized/date'   let {  label = 'Select a date',  value = $bindable(),  placeholder = $bindable(),  name, // exists here  invalid = $bindable(false),  error = $bindable(),  ...restProps  }: DateField.RootProps & {  label: string  name?: string  invalid?: boolean  error?: string  } = $props() </script> <DateField.Root bind:value bind:placeholder {...restProps} > <div> <DateField.Label>{label}</DateField.Label> <DateField.Input {name}> <!-- passed correctly to Input --> {#snippet children({ segments })} {#each segments as { part, value }, i (part + i)} <div> {#if part === 'literal'} <DateField.Segment {part} > {value} </DateField.Segment> {:else} <DateField.Segment {part} > {value} </DateField.Segment> {/if} </div> {/each} {/snippet} </DateField.Input> </div> </DateField.Root>

In usage (paired with SuperForms) to get the ISO value I'm passing a name prop:

<script lang="ts"> import { getLocalTimeZone, ZonedDateTime, now } from '@internationalized/date' let dateValue = $state<ZonedDateTime | undefined>(now(getLocalTimeZone()))   $effect(() => {  if (dateValue) {  $scheduleForm.nextTime = dateValue.toAbsoluteString()  } }) </script> <DateField name="nextTime" label={`Next time (${getLocalTimeZone()})`} minValue={today(getLocalTimeZone())} granularity="minute" bind:value={dateValue} />

However, the hidden input while appears (as per docs), its value attribute is missing:

Am I doing something wrong in my setup?

[huntabyte]

Check this: https://svelte.dev/playground/e96d77a211ad4427ae59e12b890e0317?version=latest

If you try to pull the value from the input via formdata/form submission or another way, you should have a value, for some reason Svelte doesn't show it in the DOM when it's reactive.

[igorlanko]

Interesting. Surprisingly, if I put my own hidden input next to the component, setting the same value variable—the value shows up!

<script lang="ts"> let dateValue = $state<ZonedDateTime | undefined>(now(getLocalTimeZone()))  $effect(() => {  if (dateValue) {  $scheduleForm.nextTime = dateValue.toAbsoluteString()  } }) </script> <DateField label={`Next time (${getLocalTimeZone()})`} minValue={today(getLocalTimeZone())} invalid={$errors.nextTime ? true : false} error={$errors.nextTime?.[0]} granularity="minute" {...$constraints.nextTime} bind:value={dateValue} /> <input type="hidden" name="nextTime" value={dateValue ? dateValue.toAbsoluteString() : ''} />

But anyway, I think my issue was that at the form submission the DateField itself was removed from DOM in the first place—so that hidden input would not be present inside the form anyway!

Thanks for the quick reply :)