Proposal: useForm setDisabled, isSubmitting, getSubmitProps

[SomeBody16]

Proposal

So, first example usage:

const AddCitizenForm = (props: {
    onFinish: () => void
    defaultFullName?: (string | undefined)[]
}) => {
    const server = useServer()
    const router = useRouter()
    const form = useForm<CitizenForm>({
        initialValues: {
            name: props.defaultFullName?.[0] || '',
            surname: props.defaultFullName?.[1] || '',
            birthDate: undefined,
            height: undefined,
        },
    })

    const addCitizenMutation = addCitizen.useSafeMutation()
    const submitHandler = (citizen: CitizenForm) => {
        form.setDisabled(true) // Here!
        addCitizenMutation.mutate(
            {
                citizen,
            },
            {
                onSuccess: ({ data }) => {
                    props.onFinish()
                    router.push(`/s/${server.id}/citizen/${data?.citizen.id}`)
                },
                onSettled: () => {
                    form.setDisabled(false) // Here!
                },
            },
        )
    }

    return (
        <form onSubmit={form.onSubmit(submitHandler)}>
            <Stack spacing="xs">
                <TextInput required label={'Name'} {...form.getInputProps('name')} data-autoFocus />
                <TextInput required label={'Surname'} {...form.getInputProps('surname')} />
                <DatePicker
                    label={'BirthDate'}
                    allowFreeInput
                    {...form.getInputProps('birthDate')}
                />
                <NumberInput label={'Height'} {...form.getInputProps('height')} />
                <Group position="right">
                    <Button {...form.getSubmitProps()}> {/* Here! */}
                        {form.isSubmitting ? <Loader variant="bars" /> : 'Save'} {/* And here! */}
                    </Button>
                </Group>
            </Stack>
        </form>
    )
}

I personally like, when form is disabled during submitting, so when I receive errors from server, they will still relevant tu current form state

So my proposal is to add additional properties to useForm, to control when form will be disabled

I'm currently using this override:

import { useForm as useMantineForm } from '@mantine/form'
import {
    UseFormInput as MantineUseFormInput,
    UseFormReturnType as MantineUseFormReturnType,
} from '@mantine/form/lib/use-form'
import React from 'react'

type UseFormInput<T> = MantineUseFormInput<T> & {
    disableOnSubmitting?: boolean
}

type UseFormReturnType<T> = MantineUseFormReturnType<T> & {
    disabled: boolean
    setDisabled: (disabled: boolean) => void
    getSubmitProps: () => {
        type: 'submit'
        disabled: boolean
    }
    isSubmitting: boolean
    onSubmit: (
        handleSubmit: (values: T, event: React.FormEvent<Element>) => void | Promise<void>,
    ) => (event: React.FormEvent<Element>) => void
}

export const useForm = <
    T extends {
        [key: string]: any
    },
>(
    formInput: UseFormInput<T>,
): UseFormReturnType<T> => {
    const form = useMantineForm(formInput)

    const [userDisabled, setUserDisabled] = React.useState(false)
    const [isSubmitting, setIsSubmitting] = React.useState(false)

    const isFormDisabled = formInput.disableOnSubmitting ? isSubmitting : userDisabled
    return {
        ...form,
        disabled: isFormDisabled,
        setDisabled: setUserDisabled,
        getInputProps: (field, options) => {
            return {
                ...form.getInputProps(field, options),
                disabled: isFormDisabled,
            }
        },
        getSubmitProps: () => {
            return {
                type: 'submit',
                disabled: isFormDisabled,
            }
        },
        onSubmit: (handleSubmit) => {
            return form.onSubmit(async (values, event) => {
                setIsSubmitting(true)
                await handleSubmit(values, event)
                setIsSubmitting(false)
            })
        },
        isSubmitting,
    }
}

So there are few things to discuss!

1. Is this mechanic generally ok?

UseFormReturnType

3. disabled - is the whole form disabled
4. setDisabled(disabled: boolean) - disable form
   • or maybe this should be setDisabled(field: keyof T, disabled: boolean) to control each field? 🤔
5. getSubmitProps() - basically type=submit and if disabled
6. isSubmitting - support for async onSubmit handler

UseFormInput

7. disableOnSubmitting?: boolean - if true then form will be disabled during onSubmit handler working
8. Maybe more control on what should be disabled during submitting? Like disableOnlySubmitButtonDuringSubmitting?: boolean (and then change this horrible long variable to something more compact)

So after discussion I would love to contribute to this repo, and create this feature and section in documentation, if it's ok with current design

[rtivital]

You can disable each field individually, I do think that it is a great idea to manage that on library level.

[SomeBody16]

Soo, is this a yes and I should start working on PR? 🤔

[rtivital]

This is no – I do not think that it is a great idea to manage that on library level. Sorry, forgot 'not' part.

[samthomson]

👍 +1 for this idea. It is possible to disabled={isSubmitting} on every input but that is quite laborious.

[danikane]

👍 +1 for this idea. It is possible to disabled={isSubmitting} on every input but that is quite laborious.

What about the new FieldSet component? Does it apply here?