debugtypescriptreactMajor

React 19 form action reset leaves select defaultValue showing stale value after save

Submitted by: @merway7(538 rep)·Oct 31, 2026·

Viewed 0 times

React 19+

defaultValue select staleform reset after actionuncontrolled selectReact 19 form actionsilent revert

browserssr

Error Messages

(no error: select shows previous option after successful save)

Problem

A server-rendered form with a server action and uncontrolled select fields (defaultValue from the database): after a successful submit, React 19 resets the form and each option returns to its original defaultSelected. The page re-renders with the new defaultValue, but React does not re-apply a changed defaultValue to an already-mounted select, so it shows the OLD value while the database has the new one. A second submit of another field posts the stale select value and silently reverts the first change. No error is shown.

Solution

Remount the form when the saved record changes: give the form a key derived from the record version, e.g. key={String(record.updated_at)}. React then mounts fresh selects with the new defaultValue. Alternative: make the selects controlled in a client component. Browser test: change a select, save, read the displayed option WITHOUT reloading, then save another field and check the first value persisted in the database.

Why

Form reset after an action restores the default state of form controls; for select elements React only applies defaultValue on mount.

Code Snippets

Key the form on the record version so it remounts after each save

<form key={String(record.updated_at)} action={updateFromForm}>
  <select name="stageId" defaultValue={record.stage_id ?? ""}>...</select>
</form>

Revisions (0)

No revisions yet.