Page reloads on form submission by enter key press in Chrome

[TimoWestland]

Describe the bug and the expected behavior

In a react-router/remix application, using the useForm hook and parseWithZod, when submitting a form that gets validated in the server action using parseWithZod again, the page will reload when it's submitted by pressing the enter key instead of clicking the submit button, in Google chrome.

On other browsers (Firefox, safari, edge) the issue does not occur. Submitting by clicking the submit button also works fine in chrome. Tabbing the focus onto the submit button and then pressing the submit button using the enter key also works correctly.

The app fist behaves correctly, showing the success message, but then the page gets reloaded and resets the state of actionData, causing the success message to disappear.

Here's a codesandbox that shows the issue when opened in chrome and submitted by pressing the enter key:

https://codesandbox.io/p/devbox/jlqgdx

Conform version

v1.8.1

Steps to Reproduce the Bug or Issue

1. Open app (or codesandbox) in google chrome
2. Fill out e-mail and password input fields
3. Press enter key to submit the form

What browsers are you seeing the problem on?

Chrome

Screenshots or Videos

Faulty behavior in chrome:

Screen.Recording.2025-07-08.at.14.43.57.mov

Correct behavior in firefox:

Screen.Recording.2025-07-08.at.14.45.21.mov

Additional context

Versions as used in codesandbox:

React-router version: 7.1.5
Typescript version: 5.7.2
Zod version: 3.25.76

Google chrome version: 138.0.7204.93
OS version: Mac OS Sonoma 14.6.1

[edmundhung]

Thanks for the repo! The issue here seems to happen only when you unmount the form for the success message, which triggered the onBlur handler of the input for validation.

Here's a quick workaround to disable blur validation during navigation:

const actionData = useActionData<typeof action>();
+const navigation = useNavigation();
const [form, fields] = useForm({
  id: "login-form",
  constraint: getZodConstraint(LoginFormSchema),
  lastResult: actionData?.result,
  onValidate({ formData }) {
    return parseWithZod(formData, {
      schema: LoginFormSchema,
    });
  },
-  shouldRevalidate: 'onBlur',
+  shouldRevalidate: navigation.status === 'idle' ? "onBlur" : undefined,
});

[TimoWestland]

Thanks for the repo! The issue here seems to happen only when you unmount the form for the success message, which triggered the onBlur handler of the input for validation.

Here's a quick workaround to disable blur validation during navigation:

const actionData = useActionData();
+const navigation = useNavigation();
const [form, fields] = useForm({
id: "login-form",
constraint: getZodConstraint(LoginFormSchema),
lastResult: actionData?.result,
onValidate({ formData }) {
return parseWithZod(formData, {
schema: LoginFormSchema,
});
},

• shouldRevalidate: 'onBlur',

• shouldRevalidate: navigation.status === 'idle' ? "onBlur" : undefined,
  });

Thanks for the quick reply! I will use this work around :)