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:

remix-hook-form/src/hook/index.tsx

Line 104 in 7bbaef9

const encType = submitConfig?.encType ?? formEncType;

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:

remix-hook-form/src/hook/index.tsx

Line 224 in 7bbaef9

(data, e) => onValidHandler(data, e, encType, method, action),

Exposed onSubmit here:

remix-hook-form/src/hook/index.tsx

Lines 231 to 239 in 7bbaef9

	const hookReturn = useMemo(
	() => ({
	...methods,
	handleSubmit,
	reset,
	register,
	formState,
	}),
	[methods, handleSubmit, reset, register, formState],

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

remix-hook-form/src/hook/index.tsx

Line 220 in 7bbaef9

const onValidHandler = submitHandlers?.onValid ?? onSubmit;