[BUG] - NextUI defaultValue broken

[assad-skipbau]

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

Operating System Version

windows

Browser

Chrome

[linear]

ENG-1510 [BUG] - NextUI defaultValue broken

[MariuzM]

I'm having issues with Autocomplete, I'm setting my label with react hook form and passing it, but it does not pick up.
Only thing that works is defaultSelectedKey with value not label, but i don’t have value id of it i just need to set some text in the input thats it but i cant

[wingkwong]

defaultValue is a uncontrolled prop. You shouldn't set a dynamic value there. In your case, you need a controlled one which is value. See https://nextui.org/docs/components/input#controlled.

Just FYI, react 19 + nextJS 15 is not supported in 2.4.8. We have a beta branch for that tho and will be available in the next release.

[assad-skipbau]

defaultValue is a uncontrolled prop. You shouldn't set a dynamic value there. In your case, you need a controlled one which is value. See https://nextui.org/docs/components/input#controlled.

Just FYI, react 19 + nextJS 15 is not supported in 2.4.8. We have a beta branch for that tho and will be available in the next release.

the value is disabling edits.

[wingkwong]

You need to set onValueChange. See the example from the above link.