diff --git a/.changeset/afraid-owls-repair.md b/.changeset/afraid-owls-repair.md new file mode 100644 index 00000000..35dc7a60 --- /dev/null +++ b/.changeset/afraid-owls-repair.md @@ -0,0 +1,5 @@ +--- +'@conform-to/react': patch +--- + +fix(conform-react): stop updating value of input buttons diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts index dcee2064..11c0f3c4 100644 --- a/packages/conform-react/hooks.ts +++ b/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; } diff --git a/playground/app/routes/form-control.tsx b/playground/app/routes/form-control.tsx index dad98b68..81fbfa85 100644 --- a/playground/app/routes/form-control.tsx +++ b/playground/app/routes/form-control.tsx @@ -128,6 +128,12 @@ export default function FormControl() { > Reset form + diff --git a/tests/integrations/form-control.spec.ts b/tests/integrations/form-control.spec.ts index 039b3ea5..54c00cc8 100644 --- a/tests/integrations/form-control.spec.ts +++ b/tests/integrations/form-control.spec.ts @@ -14,6 +14,7 @@ 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"]'), }; } @@ -21,6 +22,9 @@ 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();