why I can not clear input in my form action?

Answered

Sage Grouse posted this in #help-forum

Sage GrouseOP

2024-05-19T03:09:21.106Z

why when i try to clear input in form action it is not happening until action is finished? if my action look slike this, the input is cleared only after 5 sec. what am i doing wrong and how to clear input in the beggining?

<form
              action={async () => {
                setInput('');
                const sleep = (ms: number) =>
                  new Promise((r) => setTimeout(r, ms));
                await sleep(5000);
              }}
            >

Answered by joulev

example: https://react.dev/blog/2024/04/25/react-19#by-convention-functions-that-use-async-transitions-are-called-actions

View full answer

11 Replies

@Sage Grouse why when i try to clear input in form action it is not happening until action is finished? if my action look slike this, the input is cleared only after 5 sec. what am i doing wrong and how to clear input in the beggining? ` <form action={async () => { setInput(''); const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); await sleep(5000); }} >`

!=tgt

2024-05-19T03:21:20.095Z

What are you trying to do

Sage GrouseOP

2024-05-19T03:28:50.625Z

lets say I have Text Input and Submit Button, when I click button i want to create todo item with input content and clear Input so it is ready for next input of todo item

Sage GrouseOP

2024-05-19T03:34:08.700Z

if server takes 1 sec to save todo, the input is cleared after one sec, despite it is being first line in action

@Sage Grouse if server takes 1 sec to save todo, the input is cleared after one sec, despite it is being first line in action

!=tgt

2024-05-19T04:17:09.175Z

make form client component -> after submission reset

wrap your server action in a client component like this for example

export default function Page() {
  const formRef = useRef<HTMLFormElement>(null)
  function action(formData: FormData) {
    formRef.current?.reset()
    serverAction(formData)
  }
  return (
    <form action={action}>
      <input />
      <button type="submit">submit</button>
    </form>
  )
}

Sage GrouseOP

2024-05-19T05:01:17.407Z

my input is controlled
const [input, setInput] = useState('');

<form
              className="flex flex-col gap-4"
              action={async () => {
                const prompt = input;
                setInput('');

joulev

2024-05-19T05:52:28.464Z

actions are transitions. state updates done inside transitions are only executed when transitions resolve.

to clear input, use onSubmit:

"use client";

import { useState } from "react";

export default function Page() {
  const [value, setValue] = useState("");
  async function action(formData: FormData) {
    console.log(formData.get("name"));
    await new Promise(resolve => setTimeout(resolve, 1000));
  }

  return (
    <form action={action} onSubmit={() => setValue("")}>
      <input type="text" name="name" value={value} onChange={e => setValue(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}