dependent-tan

Form state is inconsistent when using with server action

The following is a simplified version of what I'm currently doing, which is basically aligned with the example shown in the dic:

const [{ successReturn, formState }, action, isSubmitting] = useActionState(
  submitForm,
  { formState: initialFormState },
);

const form = useForm({
  ...formOptions,
  defaultValues,
  transform: useTransform(
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    (baseForm) => mergeForm(baseForm, formState!),
    [formState],
  ),
});

<form.Subscribe selector={({ isSubmitted }) => isSubmitted}>
  {(isSubmitted) => {
    // display a dialog after submit success
  }}
</form.Subscribe>

const [{ successReturn, formState }, action, isSubmitting] = useActionState(
  submitForm,
  { formState: initialFormState },
);

const form = useForm({
  ...formOptions,
  defaultValues,
  transform: useTransform(
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    (baseForm) => mergeForm(baseForm, formState!),
    [formState],
  ),
});

<form.Subscribe selector={({ isSubmitted }) => isSubmitted}>
  {(isSubmitted) => {
    // display a dialog after submit success
  }}
</form.Subscribe>

Yet, I noticed a few things. 1. Form states are still being updated according to the progress of onSubmit, instead of the server action, e.g. isSubmitted is immediately turned to true after passing the client side validation (since the action is doing the form submition part, instead of onSubmit) 2. I don't seem to be able to overwrite the states, e.g. isSubmiting, in mergeForm. I was trying to overwrite it with the pending state from useActionState. May I know if anyone has further dig deep om the integration between TabStack Form and server action?

5 Replies

equal-aqua•5mo ago

the transform has come up quite a few times here, so it's definitely worth looking up chatlog from #form-questions as well as #form I'm not sure what solutions those users ended up using, but hopefully there's something to be found there I'm sure the maintainers would appreciate some work on the adapters, so if you think the server action stuff can be adjusted, they wouldn't mind an issue / PR about it

dependent-tanOP•5mo ago

The thing is, no, there doesn't seem to be a conclusion on this whether this is intended or not, across multiple past discussion. Currently, it works OK for my use case, but from what I observed, the current behavior just looks strange to me. That's the reason I was wondering is this supposed to be how it works currently and whether there is a better/right way to achieve that I may have overlooked

equal-aqua•5mo ago

I honestly don't know. I totally agree that it's not clarified yet, which is why I think an issue on Github is worth it worst case, it gets closed and it is clarified. Then we can mention it here for future users looking for answers. best case, a PR is implemented with changes to the adapter so it's fixed

dependent-tanOP•5mo ago

Hi @crutchcorn, so I noticed your reply on GitHub regarding a similar topic as this one. May I know if this is the final decision? https://github.com/TanStack/form/issues/1018 If yes, then I would imagine the documentation on this should be updated, clarified, and adding more elaborations (e.g., how is it different from calling a server action in onSubmit), since the corresponding part is literally wrong on this topic, in which I'm happy to contribute to this. But before that, I would like to make sure if this is indeed the situation and whether there are any reconsiderations regarding the API (the form state is extremely misleading once server actions come into play IMO)

GitHub

Next Server Actions example doesn't account for pending status of s...

Describe the bug When submitting a form, only the client-side state is taken into account for isSubmitting, canSubmit, etc. The server pending state isn't considered at all. Your minimal, repro...

wise-white•5mo ago

@Zeraph just a heads up we don't ping maintainers here, he's not available atm. I would check the issues and if theres not one there, then open one. It's the best way to interact with us, without constant pings from discord, and other members can weigh in on the merits 😃

Gaming

Programming

Form state is inconsistent when using with server action

Did you find this page helpful?