fix(conform-react): stop updating value of input buttons (#766)

.changeset/afraid-owls-repair.md

@@ -0,0 +1,5 @@
+---
+'@conform-to/react': patch
+---
+
+fix(conform-react): stop updating value of input buttons

packages/conform-react/hooks.ts

@@ -135,8 +135,13 @@ export function useForm<
 				const next = stateSnapshot.key[element.name];
 				const defaultValue = stateSnapshot.initialValue[element.name];
 
-				if (prev === 'managed') {
-					// Skip fields managed by useInputControl()
+				if (
+					prev === 'managed' ||
+					element.type === 'submit' ||
+					element.type === 'reset' ||
+					element.type === 'button'
+				) {
+					// Skip buttons and fields managed by useInputControl()
 					continue;
 				}
 

playground/app/routes/form-control.tsx

@@ -128,6 +128,12 @@ export default function FormControl() {
 						>
 							Reset form
 						</button>
+						<input
+							type="submit"
+							className="rounded-md border p-2 hover:border-black"
+							name="example"
+							value="Submit"
+						/>
 					</div>
 				</Playground>
 			</Form>

tests/integrations/form-control.spec.ts

@@ -14,13 +14,17 @@ function getFieldset(form: Locator) {
 		clearMessage: form.locator('button:text("Clear message")'),
 		resetMessage: form.locator('button:text("Reset message")'),
 		resetForm: form.locator('button:text("Reset form")'),
+		inputButton: form.locator('input[type="submit"]'),
 	};
 }
 
 async function runValidationScenario(page: Page) {
 	const playground = getPlayground(page);
 	const fieldset = getFieldset(playground.container);
 
+	// Conform should not overwrite the value of any input buttons
+	await expect(fieldset.inputButton).toHaveValue('Submit');
+
 	await expect(playground.error).toHaveText(['', '', '']);
 
 	await fieldset.validateMessage.click();