edmundhung/conform v1.4.0

on GitHub

What's Changed

Form side effect

Previously, Conform heavily relied on the React key prop to update the input value when updating field values with form.update() or resetting the form with form.reset().This was not ideal and have introduced several issues along the way, such as the unexpected onBlur validation behavior caused by React re-mounting the input when the key prop changes and the new warning message with spreading key with getInputProps() in React 19.

In v1.4.0, Conform will run a side effect to update the input value instead. Meaning...

• Helpers like getInputProps, getSelectProps or getTextareaProps are no longer spreading a key to the input element. If you were seeing the message Warning: A props object containing a "key" prop is being spread into JSX, it should be resolved now.
• Outstanding issues caused by inputs being unmounted (e.g. #701 and #730) are now fixed

With the need of key props removed, Conform is now able to validate and update the input value as long as a name is provided:

function Example() {
  const [form, fields] = useForm({
    // ...
  });

  return (
    <form id={form.id} onSubmit={form.onSubmit}>
      <input type="text" name={fields.username.name} />
      <input type="password" name={fields.password.name} />
      <button>Submit</button>
    </form>
  );
}