fix(conform-react): add missing case in useFieldList (#286)

Co-authored-by: Edmund Hung <[email protected]>
edmundhung · Sep 7, 2023 · 80c88f2 · 80c88f2
1 parent b375185
commit 80c88f2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts
@@ -738,6 +738,7 @@ export function useFieldList<Schema extends Array<any> | undefined>(
 				switch (intent.payload.operation) {
 					case 'append':
 					case 'prepend':
+					case 'insert':
 					case 'replace':
 						errorList = updateList(errorList, {
 							...intent.payload,

diff --git a/playground/app/routes/simple-list.tsx b/playground/app/routes/simple-list.tsx
@@ -84,7 +84,7 @@ export default function SimpleList() {
 				<div className="flex flex-row gap-2">
 					<button
 						className="rounded-md border p-2 hover:border-black"
-						{...list.insert(items.name, { index: 0 })}
+						{...list.insert(items.name, { defaultValue: 'Top item', index: 0 })}
 					>
 						Insert top
 					</button>

diff --git a/tests/integrations/simple-list.spec.ts b/tests/integrations/simple-list.spec.ts
@@ -52,15 +52,15 @@ async function runValidationScenario(page: Page) {
 	// Insert a new row
 	await fieldset.insertTop.click();
 	await expect(fieldset.items).toHaveCount(1);
-	await expect(item0.content).toHaveValue('');
+	await expect(item0.content).toHaveValue('Top item');
 
 	// Type `Another Item` on first row
-	await item0.content.type('Another item');
+	await item0.content.fill('Another item');
 
 	// Insert a new row on top
 	await fieldset.insertTop.click();
 	await expect(fieldset.items).toHaveCount(2);
-	await expect(item0.content).toHaveValue('');
+	await expect(item0.content).toHaveValue('Top item');
 	await expect(item1.content).toHaveValue('Another item');
 
 	// Insert a new row at the bottom
@@ -72,14 +72,14 @@ async function runValidationScenario(page: Page) {
 		'',
 		'',
 	]);
-	await expect(item0.content).toHaveValue('');
+	await expect(item0.content).toHaveValue('Top item');
 	await expect(item1.content).toHaveValue('Another item');
 	await expect(item2.content).toHaveValue('');
 
 	await playground.submit.click();
 	await expect(playground.error).toHaveText([
 		'Maximum 2 items are allowed',
-		'The field is required',
+		'',
 		'',
 		'The field is required',
 	]);
@@ -122,7 +122,7 @@ async function runValidationScenario(page: Page) {
 	await playground.submit.click();
 	await expect(playground.error).toHaveText(['', 'The field is required', '']);
 
-	await item0.content.type('Top item');
+	await item0.content.type('Last item');
 
 	// Trigger revalidation
 	await playground.submit.click();
@@ -132,11 +132,11 @@ async function runValidationScenario(page: Page) {
 			{
 				intent: 'submit',
 				payload: {
-					items: ['Top item', 'Another item'],
+					items: ['Last item', 'Another item'],
 				},
 				error: {},
 				value: {
-					items: ['Top item', 'Another item'],
+					items: ['Last item', 'Another item'],
 				},
 			},
 			null,
@@ -161,12 +161,14 @@ async function testListDefaultValue(page: Page, shouldReset?: boolean) {
 
 	await fieldset.insertTop.click();
 	await expect(fieldset.items).toHaveCount(2);
-	await expect(item0.content).toHaveValue('');
+	await expect(item0.content).toHaveValue('Top item');
 	await expect(item1.content).toHaveValue('default item 1');
 
 	await item1.delete.click();
 	await expect(fieldset.items).toHaveCount(1);
-	await expect(item0.content).toHaveValue('');
+	await expect(item0.content).toHaveValue('Top item');
+
+	await item0.content.fill('');
 
 	await playground.submit.click();
 	await expect(fieldset.items).toHaveCount(1);