Reactive remote form field.value()

[bdmackie]

Describe the problem

I often use a hidden input field as a backing field for a complex UI control like a date picker.

Before Field Proxies

Previously I'd bind to a rune (acting like a shadow dom to the form) and it all worked as I expect.

// script
const data = $state({name: 'Bob'; birthdate: Date.now()});

<!--- template --->
<input name="category" type="hidden" value={data.birthdate} />
<MyDatePicker bind:value={data.birthdate} />
<p>Debug birthdate: {data.birthdate}</p>

Attempt After Field Proxies

With the new field proxy, I thought I could do away with the rune 'shadow DOM' and use the field.value() and field.set() methods. This treats the field itself as the source of truth.

// script
const data = $state({name: 'Bob'; birthdate: Date.now()});

<!--- template --->
<input name="birthdate" type="hidden" value={form.fields.birthdate.value()} />
<MyDatePicker bind:value={() => form.fields.birthdate.value(), (v) => form.fields.birthdate.set(v)} />
<p>Debug birthdate: {form.fields.birthdate.value()}</p>

Observations/Problems

1. Updates to the date picker calls field.set() but DOES NOT cause the input value to update.
2. BUT: Logging a call to field.value() immediately after the call to field.set() DOES show the updated value.
3. HOWEVER: Submitting the form DOES NOT show the updated value in the result. - !!! BUG?
4. The debug line also does NOT update.

Describe the proposed solution

My preference is that any rendering of field.value() is reactive, i.e. any calls to field.set() will cause anything else referring to field.value() to update.

Alternatives considered

The alternative would be to continue using a rune shadow DOM, but that seems to reduce the simplification value of the form proxies substantially.

.... or perhaps another approach that I'm unaware of?

Importance

would make my life easier

Additional Information

No response

[datstarkey]

To add to this. I expected it to work how you did, where the values() would be reactive based on a value being set.

I did find a workaround for this without creating a shadow rune for now. its a little it hacky but it works, so if the form is remade the value updates, but updating the date picker updates the form etc.

<script lang="ts">
	import DatePicker from '$lib/components/ui/date-picker/DatePicker.svelte';
	import { Label } from '$lib/components/ui/label';
	import type { RemoteFormField } from '@sveltejs/kit';
	import { type ComponentProps } from 'svelte';

	type DatePickerProps = Omit<ComponentProps<typeof DatePicker>, 'value'>;
	type Props = DatePickerProps & {
		field: RemoteFormField<string>;
		label: string;
		description?: string;
	};

	let { field, label, description }: Props = $props();

	//get the initial value of the field
	let value = $derived(field.value() ?? '');
	// Create a hidden attribute if we have a value (otherwise svelte throws a wobble that hidden needs a value)
	let attrs = $derived(value ? field.as('hidden', value) : null);
	let issues = $derived(field.issues());
</script>

<div class="space-y-2">
	<Label class="capitalize" for={attrs?.name}>
		{label}
	</Label>

	{#if attrs}
		<input {...attrs} />
	{/if}

	<DatePicker
		bind:value={
			() => value,
			(v) => {
				//Unsure if this is needed? or the hidden changing value is what triggers the form
				field.set(v);
				value = v;
			}
		}
	/>

	{#if description}
		<p class="text-muted-foreground text-sm">{description}</p>
	{/if}

	{#each issues as issue}
		<p class="text-destructive text-sm font-medium">{issue.message}</p>
	{/each}
</div>

I'm pretty sure the issue is realted to events not being fired as I had another hacky solution with using a switch toggler instead of a checkbox for a form and had to use this workaround to get it working.

<script lang="ts">
	import { Label } from '$lib/components/ui/label';
	import { Switch } from '$lib/components/ui/switch';
	import type { RemoteFormField } from '@sveltejs/kit';
	import { type ComponentProps } from 'svelte';

	type SwitchProps = Omit<ComponentProps<typeof Switch>, 'name' | 'checked' | 'aria-invalid'>;
	type Props = SwitchProps & {
		field: RemoteFormField<boolean>;
		label: string;
		description?: string;
	};

	let { field, label, description, ...switchProps }: Props = $props();

	// Get the field attributes for the hidden checkbox
	let attrs = $derived(field.as('checkbox'));
	let checked = $derived(attrs.checked);
	let issues = $derived(field.issues());

	let checkbox = $state<HTMLInputElement>();
</script>

<div class="space-y-2">
	<div class="flex items-center space-x-2">
	
		<input {...attrs} bind:this={checkbox} class="hidden" />
		<Switch
			bind:checked={
				() => checked,
				(v) => {
					checked = v;

					//Hacky work around to simulate the checkbox being pressed instead and trigger the form values to update.
					if (checkbox) {
						checkbox.checked = v;
						checkbox.dispatchEvent(new Event('input', { bubbles: true }));
						checkbox.dispatchEvent(new Event('change', { bubbles: true }));
					}
				}
			}
			type="button"
			{...switchProps}
		/>

		<Label>
			{label}
		</Label>
	</div>

	{#if description}
		<p class="text-muted-foreground text-sm">{description}</p>
	{/if}

	{#each issues as issue}
		<p class="text-destructive text-sm font-medium">{issue.message}</p>
	{/each}
</div>

As soon as i added the dispatchEvent the values() become reactive and an $inspect saw updates whenever i changed the switch toggle. pretty sure its the hidden input firing the events that made the DatePicker input work in the first workaround.

[bdmackie]

Thanks for sharing. I did wonder if dispatching the user event would wake things up but never tried it.

I just finished a workaround strategy also... I did end up using a shadow rune but kept it away in a reusable component, in sync with .set() and returned instead of .value() in a function that's passed into a child snippet (and exported for calculated fields). Something like:

	let stringValue = $state(String(field.value() ?? ''));

	export const getStringValue = () => {
		return stringValue;
	};

	export const setStringValue = (value: string) => {
		field.set(value);
		stringValue = value;
		formProxy.recycleDebugId();
	};

<FormField.....>
  {#snippet children({field, getStringValue, setStringValue})}
    <input {...field.as('hidden', getStringValue())} value={getStringValue()}/>
    <MySelect bind:value={getStringValue, setStringValue)/>
  {/snippet}
</FormField>

The 'recycleDebugId' was a hack so my debug component refreshes:

{#key formProxy.debugId}
  <!-- Debug content -->
{/key}

[sillvva]

I think this is a good MRE

https://stackblitz.com/edit/array-methods-308957-nxhl9tqu?file=src%2Froutes%2Ftest.remote.ts,src%2Froutes%2F%2Bpage.svelte

[dummdidumm]

Closing as duplicate of #14650