useActionState hook and TextField lose current values and reshow the default values

[armandabric]

Provide a general summary of the issue here

When using the RAC TextField with default value retrieve from the useActionState:

  const someDefaultValue = {
    lastname: "Mike",
  };

  const [state, action, isPending] = useActionState(
    mySubmitAction,
    { data: someDefaultValue }
  );

And used like that:

<Form action={action}>
  <TextField name="lastname" defaultValue={state.data?.lastname ?? undefined}>
    <Label>Lastname:</Label>
    <Input />
  </TextField>

  <Button type="submit" isDisabled={isPending}>Submit</Button>
</Form>

The action mySubmitAction return the data key with the submitted data.

🤔 Expected Behavior?

When changing the value of the lastname input and submitting the form, I expect the input value to be preserved.

😯 Current Behavior

When changing the value of the lastname input and submitting the form, the lastname input value is changed back to the defaultValue.

💁 Possible Solution

The issue here is probably a lifecycle issue between : when/how react reset/empty the form (thanks react 19...), and the internal state of the TextField context.

🔦 Context

I admit using the useActionState hook put me on the edge. Not everything is really clear on how to use it. And especially by mix default value and form errors returned by the action. That how I discover this use case.

🖥️ Steps to Reproduce

Here a reproduction : https://codesandbox.io/p/devbox/grhqqp

I build three times the same form:

• one time with native HTML form (works fine),
• one time with RAC Input, Label and Form (works fine),
• and one time with RAC Input, Label, Form and TextField (does not work).

Versions

Software	Version(s)
react-aria-components	1.4.1
next	15.0.0-rc.1(or rc.2)
react	19.0.0-rc-9c6806964f-20240703
react-dom	19.0.0-rc-9c6806964f-20240703

[snowystinger]

I think this might be a duplicate or at least related to React 19 Actions + RAC Form aren't working properly due to automatic form reset

[armandabric]

Yes it seems a duplicate of this one.

As workaround, I found that adding on the Form a key that is changed on each action execution (a random value returned by the action) works. At least it render the expected value in each field. It's not perfect : the focus is lost and this trigger to much rerender (witch could be an issue with big form).

[snowystinger]

I'll close this one in favor of the original. Thank you for checking