@shopify/react-form stuck in submitting state after success

[dottodot]

When using the onSubmit on useForm I can get a successful update but the submitting value remains true which results in the ContextualSaveBar staying in the loading state.

Not sure if I'm doing something wrong or if there's an issue.

    async onSubmit(form) {
      try {
        const update = await mutation.mutateAsync(form);
      } catch (error) {
        return { status: 'fail', errors: [error] };
      } finally {
        console.log('success');
        return submitSuccess();
      }
    }

[wpK]

Were you able to resolve the issue? I've encountered the same problem and think it's related to the useMountedRef() hook.

I've created a CodeSandbox. The submitting value does not change from true after submitting using the example provided by the project.

Edit: The first CodeSandbox uses React 18.2.0. Here is a sample where you can compare the useMountedRef() hook in React 17.0.0, which works as intended but will not work with React 18.

Edit 2: React 18 <StrictMode/> will mount/unmount a component with the same state to prepare for future changes, which prevents useMountedRef() from being useful. Read more on the React v18.0 blog post.

A temporary workaround is to not use React 18 or disable <StrictMode/>.

[lmartins]

Encountered the same problem. Even when returning an object {status: 'success'} the form doesn't seem to go back to a clean state so the button spinners just keep going. As a workaround I'm using the makeClean method provided by useForm, hopefully this won't have other side-effects until a proper fix is in place.