Expose default submit handler

[david-szabo97]

submitHandlers.onValid allows us to override the valid submit handler, but we can't call the default submit handler. Therefore it's not possible to "wrap" the default submit handler with custom logic - I'm not aware of any way to do that.

Is it possible to do it? If not, would it make sense to expose the default submit handler?

[0zd0]

I'm surprised it's not there. How did the developers use this library then?

[0zd0]

there's a lot of code and checks to do at the moment...

const wasFormSubmitted = useRef(false)
const fetcher = useFetcher<ActionResponse>()

const methods = useRemixForm<FormDataType>({
    resolver,
    fetcher,
    defaultValues: {
        secretKey: '',
    },
    submitConfig: {
        method: 'POST',
        action: '/settings/api-credentials/save',
    },
})

const {
    handleSubmit,
    formState: { errors, isSubmitSuccessful },
} = methods

useEffect(() => {
    if (
        isSubmitSuccessful &&
        fetcher.state === 'idle' &&
        fetcher.data?.success &&
        !wasFormSubmitted.current
    ) {
        wasFormSubmitted.current = true
        shopify.toast.show('Saved')
    }

    if (fetcher.state === 'submitting') {
        wasFormSubmitted.current = false
    }
}, [isSubmitSuccessful, fetcher.state, fetcher.data])

[AlemTuzlak]

What would be the use case that you want to wrap it and not use the one provided by the hook or the onValid provided by the submitHandler, that one on it's own wraps around onValid.

[david-szabo97]

Our use case would be to add more data to the form when the form is submitted. Basically we make a request to a third-party (this must be called from the client, we can't move this to the server-side), then we append the data from the response to the form.

Of course we can do this before calling handleSubmit, but we wanted to find a way to hook into the useRemixForm to make sure that the form is in submitting state.

I guess we would need to do this somewhere here:
https://github.com/forge42dev/remix-hook-form/blob/7bbaef9ea4617daf5c4e0c299b38d9c0fa996e07/src/hook/index.tsx#L104
Before creating the formData to make sure that we can change the data that's being sent to the server.

Submit form -> Form is in submitting state -> Send request to third-party -> Manipulate data based on the response -> Continue on with the action submitting

After researching this more in-depth I'm not even sure if this is a good idea anymore. Probably way better to handle this outside of the form lifecycle.

[david-szabo97]

Did a quick prototype:
https://github.com/forge42dev/remix-hook-form/blob/7bbaef9ea4617daf5c4e0c299b38d9c0fa996e07/src/hook/index.tsx#L224

Exposed onSubmit here:
https://github.com/forge42dev/remix-hook-form/blob/7bbaef9ea4617daf5c4e0c299b38d9c0fa996e07/src/hook/index.tsx#L231-L239

defaultSubmitHandler: onSubmit

Then used it like this:

submitHandlers: {
  onValid: async (...args) => {
    await new Promise((resolve) => setTimeout(resolve, 10000));
    args[0].thirdPartyData= "...";
    await form.defaultSubmitHandler(...args);
  },
},

This way it's possible to do something when the form is invalid and still submit it the original way.

submitHandlers.onValid overrides the default behavior, so I don't see any other way to do this without exposing the onSubmit function, or without adding a flag
https://github.com/forge42dev/remix-hook-form/blob/7bbaef9ea4617daf5c4e0c299b38d9c0fa996e07/src/hook/index.tsx#L220

[AlemTuzlak]

this would be perfect for a clientAction, but now I found out that it doesn't allow you to augment the formData before calling the server side action :( Also, you could, in the onValid, call the form.invalidate() or whatever the function is called, wouldn't that work?