#30580·React

[React 19] Controlled `<select>` component is subject to automatic form reset

Author: cjg1122Created Aug 2, 2024Updated Sep 30, 2026
LabelsType: BugReact 19

The controlled component also resets the "select" after the action is triggered. but the "input" component does not.

javascript
"use client";
import { useActionState, useState } from "react";
function add() {
  return Date.now();
}
export default function Page() {
  const [state, formAction] = useActionState(add, 0);
  const [name, setName] = useState("");
  const [type, setType] = useState("2");
  return (
    <form action={formAction}>
      <p>{state}</p>
      <p>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </p>
      <p>
        <select
          name="gender"
          value={type}
          onChange={(e) => setType(e.target.value)}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </p>
      <button>submit</button>
    </form>
  );
}

20240802-193357

Repro: https://codesandbox.io/p/sandbox/stupefied-cohen-n578l6