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

cjg1122 · 2024-08-02T10:01:56Z

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

"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>
  );
}

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

ujshaikh · 2024-08-02T10:31:55Z

@cjg1122
Can you please add actual and expected behavior?

Deba0099 · 2024-08-02T10:43:41Z

Since useActionState passes the previous state and returns the updated state, we can reset the input and select values accordingly.

Here's an updated version of the code that properly handles resetting both the input and select elements:

"use client";
import { useActionState, useState } from "react";

// This function handles the form submission
function add(previousState, formData) {
  // Process the formData and return the new state
  const newState = Date.now();
  // Reset the input and select values
  formData.reset();
  return newState;
}

export default function Page() {
  // useActionState hook manages the form state and action
  const [state, formAction] = useActionState(add, 0);

  // Local state for input and select values
  const [name, setName] = useState("");
  const [type, setType] = useState("2");

  return (
    <form
      action={(e) => {
        formAction(e);  // Call the form action
        setName("");    // Reset the input value
        setType("2");   // Reset the select value
      }}
    >
      <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>
  );
}

Explanation:

add function:
- Receives previousState and formData as arguments.
- Processes the form data and returns a new state.
- Resets the form fields by calling formData.reset(), which is a built-in method to reset form values.
form action handler:
- Calls formAction to handle the form submission.
- Resets the local state for the input and select elements to their initial values ("" and "2" respectively).

By incorporating these changes, the form submission will reset both the input and select elements properly.

ujshaikh · 2024-08-02T10:59:11Z

I tried with above example and getting this error

I think it happed due to mismatching of args for useActionState
const [state, formAction] = useActionState(fn, initialState, permalink?);

src: https://react.dev/reference/react/useActionState

https://codesandbox.io/p/sandbox/react-dev-forked-qvpx9c?file=%2Fsrc%2FPage.js

cjg1122 · 2024-08-02T11:23:02Z

@ujshaikh The expected behaviour is that the select component should behave the same way as the input component, when I click on the submit button, the action executes and then my 2 components should keep their state values, currently the input component is as expected and the select is reset to its default value instead of the one I chose before I submitted.

I've uploaded a gif of the demo.～

cjg1122 · 2024-08-02T11:26:54Z

@Deba0099 I tried to setState the local state after the action is submitted, but the select component is still reset to the default value.

eps1lon · 2024-08-02T11:46:37Z

This is indeed a bug, thank you for reporting. Only uncontrolled components should be automatically reset when the action prop is used. The <select> here is controlled though and shouldn't change its value after the form is submitted.

Screen.Recording.2024-08-02.at.13.45.45.mov

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

ujshaikh · 2024-08-02T11:52:37Z

@cjg1122
Tried to reproduce and applied reset
https://codesandbox.io/p/sandbox/react-dev-forked-qvpx9c

AmanVerma2202 · 2024-08-04T09:31:15Z

@cjg1122
fix: reset both input and select fields to default state after form submission

Added useEffect to reset the 'name' input field and 'type' select field to their default states after form action is triggered.

 useEffect(() => {
    setName("");
    setType("2"); 
  }, [state]);

"use client";
import { useActionState, useState, useEffect } 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");

  // Reset input and select states when action state changes
  useEffect(() => {
    setName(""); // Reset name input to empty 
    setType("2"); // Reset select to default value 2
  }, [state]);

  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>
  );
}

fix 👍 : reset both fields to default state after form submission using useRef hook

import { StrictMode, useState, useRef, version } from "react";
import { createRoot } from "react-dom/client";

function App() {
  const [selectValue, setSelectValue] = useState("One");
  const [textValue, setTextValue] = useState("Alpha");
  const formRef = useRef(null);

  return (
    <form
      ref={formRef}
      action={async (formData) => {
        console.log(Object.fromEntries(formData.entries()));
        formRef.current.reset();
        setSelectValue("One");
        setTextValue("Alpha");
      }}
    >
      <label>
        select:
        <select
          name="selectValue"
          onChange={(event) => {
            setSelectValue(event.currentTarget.value);
          }}
          value={selectValue}
        >
          <option>One</option>
          <option>Two</option>
        </select>
        controlled: {selectValue}
      </label>
      <br />
      <label>
        text:
        <input
          name="textValue"
          onChange={(event) => {
            setTextValue(event.currentTarget.value);
          }}
          value={textValue}
        />
        controlled: {textValue}
      </label>
      <br />
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <>
    <p>React: {version}</p>
    <App />
  </>
);

check out code 1 here :https://codesandbox.io/p/sandbox/react-dev-forked-vfpgnn?file=%2Fsrc%2FPage.js%3A20%2C31

check out code 2 here : https://codesandbox.io/p/sandbox/react-controlled-select-subject-for-form-reset-forked-ng44jt

dberardi99 · 2024-10-13T08:38:56Z

Is this bug still present? I could work on it in this case

AmanVerma2202 · 2024-10-13T08:45:48Z

No, it's not.

…

On Sun, 13 Oct 2024 at 2:09 PM, Daniele Berardi ***@***.***> wrote: Is this bug still present? I could work on it in this case — Reply to this email directly, view it on GitHub <#30580 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5IUT46JUCTTIEXSKUHYSETZ3IWTZAVCNFSM6AAAAABL4HOOQSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMBYHA4DKMZZHE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

cima-alfa · 2024-11-28T15:53:45Z

This issue is in fact still present. Including 19.0.0-rc.1, 19.0.0-beta-26f2496093-20240514 and 19.0.0-rc-7670501b-20241124

cima-alfa · 2024-12-06T14:16:26Z

Now that React 19 is officially out, I can confirm this bug still persists.

aunruh · 2024-12-10T19:39:47Z

yea same here

watajam · 2024-12-12T06:55:06Z

Setting defaultValue and key prevents the form from resetting upon submission.


const [data, submitAction, isPending] = useActionState(〇〇, initialState)

<select 
  key={data.fieldData.selectedOption}
  id="select" 
  name="select" 
  defaultValue={data.fieldData.selectedOption}
>
  <option value="">Please select</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

goser · 2024-12-13T09:06:24Z

Same problem for checkboxes that are controlled via useState.
https://codesandbox.io/p/sandbox/react-controlled-checkbox-subject-for-form-reset-pvwgdm

Clicking the checkbox sets the checked state to true.
After submitting the form, the checked state is still true (as reflected in the "checked is ...") part but the checkbox is not visibly selected.
When rerender is triggered the checkbox is visibly selected again without changing the value of checked.

Edit: Only checkboxes inside the form seem to be subject to this bug.

flyingduck92 · 2024-12-16T23:03:51Z

Setting defaultValue and key prevents the form from resetting upon submission.


const [data, submitAction, isPending] = useActionState(〇〇, initialState)

<select 
  key={data.fieldData.selectedOption}
  id="select" 
  name="select" 
  defaultValue={data.fieldData.selectedOption}
>
  <option value="">Please select</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

I have no clue why key props should be added there in order to prevent resetting upon submission.
But that key props really works to prevent reset
Any explanation?

erfanimani · 2025-01-10T03:57:23Z

Setting the key prop works for me too.

@flyingduck92 it really looks like an odd glitch/bug in the internal workings of React (my guess). There's no mention of key in the docs: https://react.dev/reference/react-dom/components/select#select

Stormtrooper293 · 2025-01-10T05:03:42Z

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

"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>
  );
}

Repro: https://codesandbox.io/p/sandbox/stupefied-cohen-n578l6
export default function Page() {
const [state, formAction] = useActionState(add, 0);
const [name, setName] = useState("");
const [type, setType] = useState("2");
return (

{state}

<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>

<select
name="gender"
value={type}
onChange={(e) => setType(e.target.value)}
>
1
2
3

submit

);
}

marcomuser · 2025-01-19T08:48:06Z

Setting defaultValue and key prevents the form from resetting upon submission.


const [data, submitAction, isPending] = useActionState(〇〇, initialState)

<select 
  key={data.fieldData.selectedOption}
  id="select" 
  name="select" 
  defaultValue={data.fieldData.selectedOption}
>
  <option value="">Please select</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

I just ran into the exact same issue but with uncontrolled selects. Using an uncontrolled select which receives it's defaultValue from the useActionState is not reflecting the updated value after submitting. When I add the key prop it's working as expected. This is not an issue with the html input element. I suppose this is a bug in react 19?

zeeshaanl · 2025-01-23T08:44:43Z

I suffered for hours on this on the exact issue. Setting the key worked for me.

JClackett · 2025-02-19T14:47:34Z

What are we supposed to do if the input is controlled? we dont use defaultValue? even if I set value it still resets

setting key as the value doesnt work

can't use value and default value?

what the hell are we went to do lol, all my selects in the form just reset even if I havent changed the values

muhammedali2233445566778 · 2025-02-20T23:51:31Z

[ ]

y

gcb · 2025-04-22T22:21:53Z

minimal reproduction case on a nextjs15 sample project:

Screencast_20250422_220243.webm

(select revert to defaultValue)

// app/pages.tsx
"use server"
import ClientForm from "./clientform";
import type {myType} from "./serverAction";

export default async function Home() {

	const initialState: myType = {
		select: 'A',
		text: 'hello world',
	};
	return (
		<main>
			<ClientForm {...initialState} />
		</main>
	);
}

// app/serverAction.ts
"use server"
export type myType = {
	select: string,
	text: string,
}
export async function myServerAction(previousState: myType, postData: FormData) {
	//previousState.select = 'C';
	//return previousState;
	const newState: myType = {
		select: 'C',
		text: 'goodbye',
	};
	return newState;
}

// app/clientform.tsx
"use client"
import { useActionState } from 'react';
import {myServerAction} from './serverAction';
import type {myType} from './serverAction';

export default function ClientForm(initialState: myType ) {

	//const [stateAction, submitAction, isPending] = useActionState<myType>(myServerAction, initialState);
	const [stateAction, submitAction, isPending] = useActionState(myServerAction, initialState);
	console.log(stateAction);

	return (
		<form action={submitAction}>
			<p>stateAction.select = {stateAction.select}</p>
			<select defaultValue={stateAction.select} disabled={isPending}
			>
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
			</select><br />
			<input defaultValue={stateAction.text} /><br />
			<button type="submit" disabled={isPending}>Send it</button>
		</form>
	);
}

// package.json
{
  "name": "select",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.3.1"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.3.1",
    "@eslint/eslintrc": "^3"
  }
}

work around (fix) using old state components:

Screencast_20250422_220354.webm

(select remains on the selected option as i'm not using value/onChange combination, just defaultValue)

// app/clientform.tsx (without useActionState)
"use client"
import { useState } from 'react';
import { myServerAction } from './serverAction';
import type { myType } from './serverAction';

export default function ClientForm(initialState: myType) {
  const [state, setState] = useState<myType>(initialState);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const newState = await myServerAction(state, formData);
    setState(newState);
  };

  return (
    <form onSubmit={handleSubmit}>
      <p>state.select = {state.select}</p>
      <select defaultValue={state.select} disabled={false}>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      <br />
      <input defaultValue={state.text} />
      <br />
      <button type="submit">Send it</button>
    </form>
  );
}

edit: 1. the comment out code are cases also tested that do not change anything. And 2. adding the old State management apis on top of useActionState also triggers the bug. It seems useActionState overrides everything with this broken behaviour, as mentioned on #30580 (comment)

cjg1122 added the React 19 label Aug 2, 2024

eps1lon changed the title ~~[React 19] The controlled component also resets the <select> after the action~~ [React 19] Controlled <select> component is subject to automatic form reset Aug 2, 2024

eps1lon added the Type: Bug label Aug 2, 2024

eps1lon mentioned this issue Aug 21, 2024

Keep value of controlled number fields upon action #30752

Closed

eps1lon mentioned this issue Oct 8, 2024

[React 19] allow opting out of automatic form reset when Form Actions are used #29034

Open

zaru mentioned this issue Oct 31, 2024

Version 15 breaks select form element vercel/next.js#66353

Open

zaru added this to OSSトラック Oct 31, 2024

jeremy-deutsch mentioned this issue Dec 7, 2024

[React 19] Controlled checkboxes are reset by form submission and form.reset() #31695

Open

robin-a-meade mentioned this issue Feb 12, 2025

Bug: defaultValue is not consistent between input and select #24165

Closed

yns01 mentioned this issue Feb 12, 2025

useActionState resets <select defaultValue /> vercel/next.js#75962

Closed

robin-a-meade mentioned this issue Feb 15, 2025

Form inputs reset after submission in Next.js 15 when using server actions vercel/next.js#72949

Closed

wrest444 mentioned this issue Feb 20, 2025

[React 19 mm #32438

Closed

BoneFiend mentioned this issue Feb 24, 2025

Controlled Select component is resetting itself only on React 19 radix-ui/primitives#3381

Closed

gcb mentioned this issue Apr 22, 2025

Bug: select field value resets to the first option after form submission with useActionState #32362

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

cjg1122 commented Aug 2, 2024 •

edited by eps1lon

Loading

ujshaikh commented Aug 2, 2024

Deba0099 commented Aug 2, 2024 •

edited

Loading

ujshaikh commented Aug 2, 2024 •

edited

Loading

cjg1122 commented Aug 2, 2024 •

edited

Loading

cjg1122 commented Aug 2, 2024

eps1lon commented Aug 2, 2024 •

edited

Loading

ujshaikh commented Aug 2, 2024

AmanVerma2202 commented Aug 4, 2024 •

edited

Loading

dberardi99 commented Oct 13, 2024

AmanVerma2202 commented Oct 13, 2024 via email

cima-alfa commented Nov 28, 2024

cima-alfa commented Dec 6, 2024

aunruh commented Dec 10, 2024

watajam commented Dec 12, 2024 •

edited

Loading

goser commented Dec 13, 2024 •

edited

Loading

flyingduck92 commented Dec 16, 2024 •

edited

Loading

erfanimani commented Jan 10, 2025 •

edited

Loading

Stormtrooper293 commented Jan 10, 2025

marcomuser commented Jan 19, 2025 •

edited

Loading

zeeshaanl commented Jan 23, 2025

JClackett commented Feb 19, 2025 •

edited

Loading

muhammedali2233445566778 commented Feb 20, 2025

gcb commented Apr 22, 2025 •

edited

Loading

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

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

Comments

cjg1122 commented Aug 2, 2024 • edited by eps1lon Loading

ujshaikh commented Aug 2, 2024

Deba0099 commented Aug 2, 2024 • edited Loading

Explanation:

ujshaikh commented Aug 2, 2024 • edited Loading

cjg1122 commented Aug 2, 2024 • edited Loading

cjg1122 commented Aug 2, 2024

eps1lon commented Aug 2, 2024 • edited Loading

ujshaikh commented Aug 2, 2024

AmanVerma2202 commented Aug 4, 2024 • edited Loading

dberardi99 commented Oct 13, 2024

AmanVerma2202 commented Oct 13, 2024 via email

cima-alfa commented Nov 28, 2024

cima-alfa commented Dec 6, 2024

aunruh commented Dec 10, 2024

watajam commented Dec 12, 2024 • edited Loading

goser commented Dec 13, 2024 • edited Loading

flyingduck92 commented Dec 16, 2024 • edited Loading

erfanimani commented Jan 10, 2025 • edited Loading

Stormtrooper293 commented Jan 10, 2025

marcomuser commented Jan 19, 2025 • edited Loading

zeeshaanl commented Jan 23, 2025

JClackett commented Feb 19, 2025 • edited Loading

muhammedali2233445566778 commented Feb 20, 2025

gcb commented Apr 22, 2025 • edited Loading

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

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

cjg1122 commented Aug 2, 2024 •

edited by eps1lon

Loading

Deba0099 commented Aug 2, 2024 •

edited

Loading

ujshaikh commented Aug 2, 2024 •

edited

Loading

cjg1122 commented Aug 2, 2024 •

edited

Loading

eps1lon commented Aug 2, 2024 •

edited

Loading

AmanVerma2202 commented Aug 4, 2024 •

edited

Loading

watajam commented Dec 12, 2024 •

edited

Loading

goser commented Dec 13, 2024 •

edited

Loading

flyingduck92 commented Dec 16, 2024 •

edited

Loading

erfanimani commented Jan 10, 2025 •

edited

Loading

marcomuser commented Jan 19, 2025 •

edited

Loading

JClackett commented Feb 19, 2025 •

edited

Loading

gcb commented Apr 22, 2025 •

edited

Loading