Submission hack to prevent page reloading

[axelrindle]

The Issue ⁉

I stumbled across a weird phenomenon today. Even though a reload of the browser page should be prevented, my browser (MS Edge with the Chromium Engine) still did a reload on form submission. Despite added a manual e.preventDefault() (such as suggested in #3235) to it my browser still reloaded.

To work around this issue, I came up with a small hack to handle the form submission manually.

Didn't test any other browser though, because why take the easy way when it can be difficult?

Code Examples 💻

Form.tsx

import { UseMutationResult } from '@tanstack/react-query'
import { Formik, FormikContext, FormikContextType, FormikProps } from 'formik'
import { MutableRefObject, ReactNode, useContext, useEffect, useRef } from 'react'
import { FormData, FormError } from '../../types'

export interface FormContext {
    submit: () => void
    reset: () => void
}

interface Props {
    preFill?: any
    mutation: UseMutationResult<Response, FormError, FormData>
    children?: ReactNode
    formRef?: MutableRefObject<FormContext>
}

export function useFormikContext<Values>(): FormikContextType<Values> | undefined {
    return useContext<FormikContextType<Values>>(FormikContext)
}

export function useFormRef() {
    return useRef<FormContext>(null) as MutableRefObject<FormContext>
}

export default function Form(props: Props) {
    const formik = useRef<FormikProps<any>>(null)

    useEffect(() => {
        const ref = props.formRef
        if (ref !== undefined) {
            ref.current = {
                submit() {
                    formik.current?.handleSubmit()
                },
                reset() {
                    formik.current?.handleReset()
                },
            }
        }
    }, [props.formRef])

    return (
        <Formik
            innerRef={formik}
            initialValues={props.preFill ?? {}}
            onSubmit={(values, opts) => {
                opts.setErrors({})
                props.mutation.mutate(values, {
                    onSettled() {
                        opts.setSubmitting(false)
                    },
                    onError(error, _variables, _context) {
                        opts.setErrors(error.details.reduce((a, v) => {
                            return { ...a, [v.param]: v.msg }
                        }, {}))
                    },
                })
            }}
        >
            <div>
                {props.children}
            </div>
        </Formik>
    )
}

MyPage.tsx

import Form, { useFormRef } from '../components/Form'

export default function MyPage() {
    const form = useFormRef()
    const mutation = // ... imagine code here

    return (
        <Form
            mutation={mutation}
            formRef={form}
        >
            // imagine many inputs here
        </Form>

        // A Button somewhere, which calls the following upon clicking it:
        // form.current?.submit(),
    )
}

Calling form.current?.submit() effectively calls formik.current?.handleSubmit() as defined inside Form.tsx.

Conclusion 🎀

While the example code is specific to the usage of @tanstack/query an adaption to other fetch methods should be fairly easy.

Some may say this is a misusage of React Ref's, but it works this way. So who cares?

For a real life usage you can view the source code of an application I'm currently working on (this commit might be of interest too).

Let me know what you think and if you've found any bugs 🐛

Advertising not intended.

[TarekBellalouna]

submit(e) {
e.preventDefaults() ;
formik.current?.handleSubmit()
},