Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
armandabric opened this issue Oct 17, 2024 · 3 comments

Comments

@armandabric
Copy link
Contributor

armandabric commented Oct 17, 2024

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
Copy link
Member

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
Copy link
Contributor Author

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants