afraid-scarlet•4w ago

Modal form only responds to `onOkButtonClick`, but not `onFinish` in form [Antd design]

Here is the code snippet. This seems to be a really odd issue, as by nature I expect that the modal form should be able to respond to either prop mentioned in the title.

export const AddressModal = ({
    form,
    modalProps,
    formProps,
    onFinishHandler
}: {
    form: any
    modalProps: ModalProps,
    formProps: FormProps,
    onFinishHandler: (values: any) => void
}) => {

    return (
        <Modal {...modalProps} okButtonProps={{
            ...modalProps.okButtonProps,
            onClick: onFinishHandler // `onFinishHandler` has to be passed here 
        }}>
            <Form {...formProps} form={form} layout="vertical" >

export const AddressModal = ({
    form,
    modalProps,
    formProps,
    onFinishHandler
}: {
    form: any
    modalProps: ModalProps,
    formProps: FormProps,
    onFinishHandler: (values: any) => void
}) => {

    return (
        <Modal {...modalProps} okButtonProps={{
            ...modalProps.okButtonProps,
            onClick: onFinishHandler // `onFinishHandler` has to be passed here 
        }}>
            <Form {...formProps} form={form} layout="vertical" >

2 Replies

kapa.ai•4w ago

Hi @grand_chat_chat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can explain why your modal form is only responding to onOkButtonClick and not onFinish. This behavior is related to how the useModalForm hook in refine works with Ant Design's Modal and Form components. The issue you're experiencing is likely due to how you're handling the form submission. In refine's useModalForm hook, the onFinish method is typically handled internally by the hook, and it's not always necessary or recommended to override it directly. Here's how you can modify your code to make it work as expected: 1. First, you should use the onFinish method provided by formProps instead of creating a custom onFinishHandler. The formProps.onFinish method already includes logic for closing the modal and handling form submission useModalForm API Reference (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#return-values). 2. Remove the custom onClick handler from the okButtonProps. The default behavior of the OK button in the modal is to submit the form, which will trigger the onFinish method. Here's how you can modify your code:

export const AddressModal = ({
    form,
    modalProps,
    formProps
}: {
    form: any
    modalProps: ModalProps,
    formProps: FormProps
}) => {

    return (
        <Modal {...modalProps}>
            <Form {...formProps} form={form} layout="vertical">
                {/* Your form fields here */}
            </Form>
        </Modal>
    );
}

export const AddressModal = ({
    form,
    modalProps,
    formProps
}: {
    form: any
    modalProps: ModalProps,
    formProps: FormProps
}) => {

    return (
        <Modal {...modalProps}>
            <Form {...formProps} form={form} layout="vertical">
                {/* Your form fields here */}
            </Form>
        </Modal>
    );
}

By using the formProps and modalProps as provided by useModalForm, you ensure that the form submission and modal closing are handled correctly. If you need to modify the data before submission, you can use the approach described in the useModalForm FAQ (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#faq):

const { formProps, modalProps } = useModalForm({
  action: "create",
});

const handleOnFinish = (values) => {
  formProps.onFinish?.({
    // Your modified data here
  });
};

return (
  <Modal {...modalProps}>
    <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
      {/* Your form fields here */}
    </Form>
  </Modal>
);

const { formProps, modalProps } = useModalForm({
  action: "create",
});

const handleOnFinish = (values) => {
  formProps.onFinish?.({
    // Your modified data here
  });
};

return (
  <Modal {...modalProps}>
    <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
      {/* Your form fields here */}
    </Form>
  </Modal>
);

This approach allows you to modify the form data before submission while still leveraging the built-in functionality of useModalForm. Remember, when using refine's useModalForm, it's generally best to let the hook handle the form submission and modal closing logic, as it includes additional features like optimistic updates and error handling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@433636391487012874> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Modal form only responds to `onOkButtonClick`, but not `onFinish` in form [Antd design]

Did you find this page helpful?