nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.89k stars 1.52k forks source link

[BUG] - NextUI defaultValue broken #3971

Open assad-skipbau opened 1 day ago

assad-skipbau commented 1 day ago

NextUI Version

2.4.8

Describe the bug

defaultValue={dynamicVariable} is broken after submitting the form. Here is what is happening: I have a form that contains an Input. This Input has a defaultValue={state?.data?.nextUiInput}. On init, the component has initialState, which includes the initial variables, texts, etc. On the first render, everything works fine. However, once I submit the form using useActionState (or useFormState) the defaultValue bugs stop displaying the defaultvalue. Even tho exists. I tested the same procedure on a normal input field and it works as expected, everything is fine even after submitting the form, etc. Here is my initialState

const initialState = {
  success: null,
  message: "",
  data: {
    nextUiInput: "Initial NextUI Input",
    normalInput: "Initial Normal input",
  },
};

Here is my component

const NewOrder = () => {
  const [state, formAction, isPending] = useActionState(
    createOrder,
    initialState
  );

  return (
    <form action={formAction} className="w-2/3 mx-auto p-6">
      <Card>
        <CardBody className="gap-3 md:gap-6">
          <FormRow>
            <Input
              name="nextUiInput"
              label="Title"
              placeholder="Broken Window"
              defaultValue={state?.data?.nextUiInput}
            />
            {/* Works Fine */}
            <input
              type="text"
              name="normalInput"
              placeholder="Broken Window"
              defaultValue={state?.data?.normalInput}
            />
          </FormRow>
          <FormRow>
            <button type="submit" disabled={isPending}>
              submit
            </button>
          </FormRow>
        </CardBody>
      </Card>
    </form>
  );
};

Here is my Backend, the createOrder function

"use server";

export default async function createOrder(
  prevState: any,
  formData: FormData
) {
  const formDataObj = {
    nextUiInput: formData.get("nextUiInput"),
    normalInput: formData.get("normalInput"),
  };
  return {
    ...prevState,
    success: true,
    message: "Order created successfully",
    data: {
      ...prevState.data,
      ...formDataObj,
      nextUiInput: "New NextUI Input Value",
      normalInput: "New Normal Input Value",
    },
  };
}

I am using react 19, nextJS 15

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Just install the newest nextJs 15 version and follow the manual installation guide of NextUI Add the scripts above, disable TurboPack and start the application

Expected behavior

On submitting the form, the new defaultValue get's updated.

Screenshots or Videos

example bug

Operating System Version

windows

Browser

Chrome

linear[bot] commented 1 day ago

ENG-1510 [BUG] - NextUI defaultValue broken