fix: root key should be updated after form update (#609)

edmundhung · Apr 28, 2024 · 8a81644 · 8a81644
1 parent c005590
commit 8a81644
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/packages/conform-dom/form.ts b/packages/conform-dom/form.ts
@@ -435,7 +435,10 @@ 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>);
+		meta.key = {
+			...getDefaultKey(value as Record<string, unknown>),
+			'': generateId(),
+		};
 		return;
 	}
 

diff --git a/playground/app/routes/form-control.tsx b/playground/app/routes/form-control.tsx
@@ -85,7 +85,6 @@ export default function FormControl() {
 						<button
 							className="rounded-md border p-2 hover:border-black"
 							{...form.update.getButtonProps({
-								name: form.name,
 								value: {
 									number: 13579,
 									name: 'Conform',

diff --git a/tests/integrations/form-control.spec.ts b/tests/integrations/form-control.spec.ts
@@ -63,6 +63,17 @@ async function runValidationScenario(page: Page) {
 	await expect(fieldset.message).toHaveValue(
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
 	);
+
+	// To ensure that keys are updated correctly
+	await fieldset.name.fill('Test');
+	await fieldset.number.fill('2468');
+	await fieldset.message.fill('Hello World');
+	await fieldset.updateForm.click();
+	await expect(fieldset.name).toHaveValue('Conform');
+	await expect(fieldset.number).toHaveValue('13579');
+	await expect(fieldset.message).toHaveValue(
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+	);
 }
 
 test.describe('With JS', () => {