onServer errors being cleared very aggressively

[sazzer]

I'm using the onServer error type for setting errors that have resulted from calling the backend server on form submission. And this works well.

    onSubmit: async ({ value, formApi }) => {
      try {
        await editUserMutation.mutateAsync(value);
      } catch (error) {
        log.warn("An error occurred updating the user", { error });

        if (error instanceof ActionError) {
          formApi.setErrorMap({
            onServer: error.errorCode
          });
        } else {
          formApi.setErrorMap({
            onServer: "unexpected"
          });
        }
        throw error;
      }
    }

However, I've noticed that the errors set in this way seem to get reset as soon as the form is interacted with in any way - including just moving focus out of one of the fields.

Is this expected behaviour? Or am I doing something wrong here?

I'll try and get a working example to show the behaviour but it'll probably be tomorrow now...

Cheers

[sazzer]

Ok - I've got reproduction: https://stackblitz.com/edit/vitejs-vite-afsrrjgd?file=src%2FApp.tsx

I've also noticed that the errors are cleared when one of the form fields had the focus at the time it was added and is interacted with in some way - including losing focus. If you manually click on the "Submit" button then you don't get the problem immediately, but you will get it if you then put focus into one of the form fields.

Cheers

[jimydavis]

I am facing same issue. The errorMap.onServer key continues to remain but the value is now undefined after focusing and defocusing any fields on the form.

In general, there are no clear examples of how to interact with the form upon API failure. All the conversations and examples are around validation (server or client validation). I wouldn't even know about this onServer tag if it was not for this discussion.

[sazzer]

I am facing same issue. The errorMap.onServer key continues to remain but the value is now undefined after focusing and defocusing any fields on the form.

In general, there are no clear examples of how to interact with the form upon API failure. All the conversations and examples are around validation (server or client validation). I wouldn't even know about this onServer tag if it was not for this discussion.

I originally came across discussion #716 which suggests using the onSubmit field. However, that doesn't accept a string but instead needs the full field validation structure.

However, it was when I was doing that that I came across onServer in the same object, and this works fine - except for this issue :)

[jimydavis]

I am fairly (very) noob at frontend. I ended up maintaining my button state independently of TanStack. I don't find it intuitive that this is what they expect us to do. I am just trying to create a button that shows "submitting" for 3 seconds and then "success, check ur email" for 3 seconds after that. Or it would show 3 seconds of "unknown error, please email us at xxx".

  const [success, setSuccess] = useState(false);
  useEffect(() => {
    if (success) {
      const timer = setTimeout(() => {
        setSuccess(false);
      }, 3000);

      return () => clearTimeout(timer);
    }
  }, [success]);
  const [apiError, setApiError] = useState(false);

the useEffect is necessary because the "submitting" state is controlled by the onSubmit() and until you return onSubmit, it won't change the submitting state.