Refine•13mo 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" >

kapa.ai•11/29/24, 12:01 PM

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.

kapa.ai•11/29/24, 12:01 PM

----------------------
Based on the information provided in the knowledge sources, I can explain why your modal form is only responding to and not

onFinish

onFinish

. This behavior is related to how the

useModalForm

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

useModalForm

hook, the

onFinish

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:

First, you should use the
```
onFinish
```
```
onFinish
```
method provided by
```
formProps
```
```
formProps
```
instead of creating a custom . The 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).
Remove the custom
```
onClick
```
```
onClick
```
handler from the . The default behavior of the OK button in the modal is to submit the form, which will trigger the
```
onFinish
```
```
onFinish
```
method.

Here's how you can modify your code:

By using the

formProps

formProps

and

modalProps

modalProps

as provided by

useModalForm

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):

kapa.ai•11/29/24, 12:01 PM

This approach allows you to modify the form data before submission while still leveraging the built-in functionality of

useModalForm

useModalForm

.

Remember, when using refine's

useModalForm

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

----------------------

kapa.ai•11/29/24, 12:01 PM

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