feat: update field value automatically

packages/conform-dom/form.ts

@@ -279,12 +279,7 @@ function createFormMeta<Schema, FormError, FormValue>(
 		value: initialValue,
 		constraint: options.constraint ?? {},
 		validated: lastResult?.state?.validated ?? {},
-		key: !initialized
-			? getDefaultKey(defaultValue)
-			: {
-					'': generateId(),
-					...getDefaultKey(defaultValue),
-				},
+		key: getDefaultKey(defaultValue),
 		// The `lastResult` should comes from the server which we won't expect the error to be null
 		// We can consider adding a warning if it happens
 		error: (lastResult?.error as Record<string, FormError>) ?? {},
@@ -301,15 +296,20 @@ function getDefaultKey(
 ): Record<string, string> {
 	return Object.entries(flatten(defaultValue, { prefix })).reduce<
 		Record<string, string>
-	>((result, [key, value]) => {
-		if (Array.isArray(value)) {
-			for (let i = 0; i < value.length; i++) {
-				result[formatName(key, i)] = generateId();
+	>(
+		(result, [key, value]) => {
+			if (Array.isArray(value)) {
+				for (let i = 0; i < value.length; i++) {
+					result[formatName(key, i)] = generateId();
+				}
 			}
-		}
 
-		return result;
-	}, {});
+			return result;
+		},
+		{
+			[prefix ?? '']: generateId(),
+		},
+	);
 }
 
 function setFieldsValidated<Error>(
@@ -441,10 +441,8 @@ function updateValue<Error>(
 	if (name === '') {
 		meta.initialValue = value as Record<string, unknown>;
 		meta.value = value as Record<string, unknown>;
-		meta.key = {
-			...getDefaultKey(value as Record<string, unknown>),
-			'': generateId(),
-		};
+		meta.key = getDefaultKey(value as Record<string, unknown>);
+
 		return;
 	}
 

packages/conform-react/context.tsx

@@ -28,6 +28,7 @@ import {
 	useContext,
 	useSyncExternalStore,
 	useRef,
+	useEffect,
 } from 'react';
 
 export type Pretty<T> = { [K in keyof T]: T[K] } & {};
@@ -152,7 +153,67 @@ export function useFormState<FormError>(
 		[form, subjectRef],
 	);
 
-	return useSyncExternalStore(subscribe, form.getState, form.getState);
+	const state = useSyncExternalStore(subscribe, form.getState, form.getState);
+
+	useEffect(() => {
+		const formId = form.getFormId();
+		const formElement = document.forms.namedItem(formId);
+		const scope = subjectRef?.current.key;
+
+		if (!formElement || !scope) {
+			return;
+		}
+
+		const getAll = (value: unknown) => {
+			if (typeof value === 'string') {
+				return [value];
+			}
+
+			if (
+				Array.isArray(value) &&
+				value.every((item) => typeof item === 'string')
+			) {
+				return value;
+			}
+
+			return undefined;
+		};
+		const get = (value: unknown) => getAll(value)?.[0];
+
+		for (const element of formElement.elements) {
+			if (
+				(element instanceof HTMLInputElement ||
+					element instanceof HTMLTextAreaElement ||
+					element instanceof HTMLSelectElement) &&
+				scope.name?.includes(element.name)
+			) {
+				const prev = element.dataset.conform;
+				const next = state.key[element.name];
+				const defaultValue = state.initialValue[element.name];
+
+				if (typeof prev === 'undefined' || prev !== next) {
+					element.dataset.conform = next;
+
+					if ('options' in element) {
+						const value = getAll(defaultValue) ?? [];
+
+						for (const option of element.options) {
+							option.selected = value.includes(option.value);
+						}
+					} else if (
+						'checked' in element &&
+						(element.type === 'checkbox' || element.type === 'radio')
+					) {
+						element.checked = get(defaultValue) === element.value;
+					} else {
+						element.value = get(defaultValue) ?? '';
+					}
+				}
+			}
+		}
+	}, [form, state, subjectRef]);
+
+	return state;
 }
 
 export function FormProvider(props: {
@@ -307,9 +368,14 @@ export function getMetadata<
 						case 'initialValue':
 						case 'value':
 						case 'valid':
-						case 'dirty':
+						case 'dirty': {
+							if (key === 'initialValue') {
+								// If `initialValue` is subscribed, it's likely that we will want the field to be updated
+								updateSubjectRef(subjectRef, 'key', 'name', name);
+							}
 							updateSubjectRef(subjectRef, key, 'name', name);
 							break;
+						}
 						case 'errors':
 						case 'allErrors':
 							updateSubjectRef(

packages/conform-react/helpers.ts

@@ -1,7 +1,7 @@
 import type { FormMetadata, FieldMetadata, Metadata, Pretty } from './context';
 
 type FormControlProps = {
-	key: string | undefined;
+	key?: string;
 	id: string;
 	name: string;
 	form: string;
@@ -214,7 +214,6 @@ export function getFormControlProps<Schema>(
 	options?: FormControlOptions,
 ): FormControlProps {
 	return simplify({
-		key: metadata.key,
 		required: metadata.required || undefined,
 		...getFieldsetProps(metadata, options),
 	});

packages/conform-react/integrations.ts

@@ -19,8 +19,8 @@ export function getFieldElements(
 	const elements = !field
 		? []
 		: field instanceof Element
-		? [field]
-		: Array.from(field.values());
+			? [field]
+			: Array.from(field.values());
 
 	return elements.filter(
 		(
@@ -63,6 +63,7 @@ export function getEventTarget(
 
 export function createDummySelect(
 	form: HTMLFormElement,
+	key: Key | null | undefined,
 	name: string,
 	value?: string | string[] | undefined,
 ): HTMLSelectElement {
@@ -71,7 +72,7 @@ export function createDummySelect(
 
 	select.name = name;
 	select.multiple = true;
-	select.dataset.conform = 'true';
+	select.dataset.conform = `${key ?? 'true'}`;
 
 	// To make sure the input is hidden but still focusable
 	select.setAttribute('aria-hidden', 'true');
@@ -98,7 +99,7 @@ export function createDummySelect(
 export function isDummySelect(
 	element: HTMLElement,
 ): element is HTMLSelectElement {
-	return element.dataset.conform === 'true';
+	return typeof element.dataset.conform !== 'undefined';
 }
 
 export function updateFieldValue(
@@ -306,26 +307,8 @@ export function useControl<
 		change(value);
 	};
 
-	const refCallback: RefCallback<
-		HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | undefined
-	> = (element) => {
-		register(element);
-
-		if (!element) {
-			return;
-		}
-
-		const prevKey = element.dataset.conform;
-		const nextKey = `${meta.key ?? ''}`;
-
-		if (prevKey !== nextKey) {
-			element.dataset.conform = nextKey;
-			updateFieldValue(element, value ?? '');
-		}
-	};
-
 	return {
-		register: refCallback,
+		register,
 		value,
 		change: handleChange,
 		focus,
@@ -363,7 +346,7 @@ export function useInputControl<
 			typeof value !== 'undefined' &&
 			(!Array.isArray(value) || value.length > 0)
 		) {
-			element = createDummySelect(form, meta.name, value);
+			element = createDummySelect(form, meta.key, meta.name, value);
 		}
 
 		register(element);

tests/integrations/subscription.spec.ts

@@ -209,7 +209,7 @@
 		'message.formId: 1',
 		'message.errorId: 1',
 		'message.descriptionId: 1',
-		'message.initialValue: 1',
+		'message.initialValue: 2',
 		'message.value: 14',
 		'message.key: 2',
 		'message.dirty: 3',
@@ -222,7 +222,7 @@
 		'form.id: 1',
 		'form.errorId: 1',
 		'form.descriptionId: 1',
-		'form.initialValue: 1',
+		'form.initialValue: 2',
 		'form.value: 21',
 		'form.key: 2',
 		'form.dirty: 3',
@@ -233,7 +233,7 @@
 		'name.formId: 1',
 		'name.errorId: 1',
 		'name.descriptionId: 1',
-		'name.initialValue: 1',
+		'name.initialValue: 2',
 		'name.value: 8',
 		'name.key: 2',
 		'name.dirty: 3',
@@ -243,7 +243,7 @@
 		'message.formId: 1',
 		'message.errorId: 1',
 		'message.descriptionId: 1',
-		'message.initialValue: 1',
+		'message.initialValue: 3',
 		'message.value: 14',
 		'message.key: 3',
 		'message.dirty: 3',
@@ -254,11 +254,11 @@
 	await fieldset.name.fill('Conform');
 	await fieldset.message.fill('Hello Conform!');
 	await playground.submit.click();
 	await expect(fieldset.logs).toHaveText([
 		'form.id: 2',
 		'form.errorId: 2',
 		'form.descriptionId: 2',
-		'form.initialValue: 1',
+		'form.initialValue: 2',
 		'form.value: 24',
 		'form.key: 3',
 		'form.dirty: 5',
@@ -269,7 +269,7 @@
 		'name.formId: 2',
 		'name.errorId: 2',
 		'name.descriptionId: 2',
-		'name.initialValue: 1',
+		'name.initialValue: 2',
 		'name.value: 10',
 		'name.key: 3',
 		'name.dirty: 5',
@@ -279,7 +279,7 @@
 		'message.formId: 2',
 		'message.errorId: 2',
 		'message.descriptionId: 2',
-		'message.initialValue: 1',
+		'message.initialValue: 3',
 		'message.value: 16',
 		'message.key: 4',
 		'message.dirty: 5',