how to show antd modal instead of window.confirm when user have unsaved changes?

the unsaved changes currently show the window.confirm but we would like to replace it with models from ant design

2 Replies

Hi @AK. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To replace the default window.confirm dialog with an Ant Design modal when there are unsaved changes, you can customize the warnWhenUnsavedChanges behavior in refine. Here's how you can achieve this: 1. First, enable the warnWhenUnsavedChanges feature in your useForm hook:

const form = useForm({
  warnWhenUnsavedChanges: true,
});

const form = useForm({
  warnWhenUnsavedChanges: true,
});

2. Then, you can use the useModal hook from @refinedev/antd to create a custom modal:

import { useModal } from "@refinedev/antd";
import { Modal } from "antd";

const { show, close, modalProps } = useModal();

// In your component
<Modal {...modalProps} onOk={handleOk} onCancel={handleCancel}>
  <p>Are you sure you want to leave? You have unsaved changes.</p>
</Modal>

import { useModal } from "@refinedev/antd";
import { Modal } from "antd";

const { show, close, modalProps } = useModal();

// In your component
<Modal {...modalProps} onOk={handleOk} onCancel={handleCancel}>
  <p>Are you sure you want to leave? You have unsaved changes.</p>
</Modal>

3. Finally, you need to override the default warnWhenUnsavedChanges behavior in your <Refine> component configuration:

import { Refine } from "@refinedev/core";

<Refine
  // ... other configurations
  options={{
    warnWhenUnsavedChanges: {
      message: (onConfirm, onCancel) => {
        show();
        // Handle confirm and cancel actions
        modalProps.onOk = () => {
          close();
          onConfirm();
        };
        modalProps.onCancel = () => {
          close();
          onCancel();
        };
      },
    },
  }}
>
  {/* ... */}
</Refine>

import { Refine } from "@refinedev/core";

<Refine
  // ... other configurations
  options={{
    warnWhenUnsavedChanges: {
      message: (onConfirm, onCancel) => {
        show();
        // Handle confirm and cancel actions
        modalProps.onOk = () => {
          close();
          onConfirm();
        };
        modalProps.onCancel = () => {
          close();
          onCancel();
        };
      },
    },
  }}
>
  {/* ... */}
</Refine>

This setup will replace the default window.confirm dialog with an Ant Design modal when there are unsaved changes and the user tries to navigate away. For more details on the warnWhenUnsavedChanges feature and its configuration, you can refer to the Refine documentation on warnWhenUnsavedChanges. For information on using the useModal hook, check out the useModal documentation. Remember to adjust the modal content and styling according to your specific needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

how to show antd modal instead of window.confirm when user have unsaved changes?

Did you find this page helpful?