quickest-silver•2mo ago

Modal form unsaved changes prompt settings

I'm using Ant Design, and I'm trying to set up a form that will be displayed within a Modal. I'm using useModalForm and everything works great, except for one thing. When I make any change and then try to close the form without saving, it shows the unsaved changes warning. However, when I then click cancel on the warning prompt, it then closes the form and Modal and goes back to the parent "list" page. And if I click OK instead (which should close the form), it keeps the form open and reverts my changes. I'm using this code-snippet from one of the examples (finefoods-antd):

const onModalClose = () => {
    close();
    go({
      to:
        searchParams.get("to") ??
        getToPath({
          action: "list",
        }) ??
        "",
      query: {
        to: undefined,
      },
      options: {
        keepQuery: true,
      },
      type: "replace",
    });
  };

const onModalClose = () => {
    close();
    go({
      to:
        searchParams.get("to") ??
        getToPath({
          action: "list",
        }) ??
        "",
      query: {
        to: undefined,
      },
      options: {
        keepQuery: true,
      },
      type: "replace",
    });
  };

I'm then using it in the Modal props for onCancel. I've tried using it as onClose instead, but then the modal just stays open. I assume that somehow this setting is passed to the unsaved-changes prompt, which then applies that when I hit cancel, instead of keeping the form open with the changes intact. Am I doing something wrong, or is this an expected behavior? Note that in the finefoods-antD example, the behavior is similar and does not persist changes.

8 Replies

kapa.ai•2mo ago

Hi @Stormlight. 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 address your question about the unsaved changes prompt behavior in the modal form using useModalForm with Ant Design. The behavior you're experiencing is related to the warnWhenUnsavedChanges property of useModalForm. This property, when set to true, shows a warning when the user tries to leave the page with unsaved changes. It's designed to prevent accidental loss of data. However, the specific behavior you're describing, where clicking "Cancel" on the warning prompt closes the form and modal, and clicking "OK" keeps the form open but reverts changes, is not the expected behavior according to the documentation. To address this issue, you might want to try the following: 1. Ensure that you're using the latest version of @refinedev/antd and @refinedev/core. 2. Check if you have explicitly set warnWhenUnsavedChanges in your useModalForm hook. If not, you can try setting it explicitly:

const { modalProps, formProps } = useModalForm({
  warnWhenUnsavedChanges: true,
  // other props...
});

const { modalProps, formProps } = useModalForm({
  warnWhenUnsavedChanges: true,
  // other props...
});

3. Instead of using a custom onModalClose function, try using the close function provided by useModalForm directly:

const { modalProps, formProps, close } = useModalForm({
  // your options here
});

// Then in your Modal component:
<Modal {...modalProps} onCancel={close}>
  {/* Your form content */}
</Modal>

const { modalProps, formProps, close } = useModalForm({
  // your options here
});

// Then in your Modal component:
<Modal {...modalProps} onCancel={close}>
  {/* Your form content */}
</Modal>

This approach should handle the closing behavior correctly, including the unsaved changes warning. 4. If you still face issues, you might want to check if there are any conflicting configurations in your <Refine> component or in your data provider that could be affecting this behavior. It's worth noting that the behavior you're experiencing is not the intended functionality according to the documentation. If these suggestions don't resolve the issue, it might be worth reporting this as a potential bug to the refine team. For more detailed information about useModalForm and its properties, you can refer to the useModalForm documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

quickest-silverOP•2mo ago

@kapa.ai is there a simple way (like a hook) to check if there are unsaved changes myself?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, there is a simple way to check for unsaved changes yourself when using useModalForm in refine. The hook provides a property called formState which includes an isDirty flag that you can use to determine if there are unsaved changes in the form. Here's how you can use it:

const {
  formProps,
  modalProps,
  formState: { isDirty },
} = useModalForm();

const {
  formProps,
  modalProps,
  formState: { isDirty },
} = useModalForm();

The isDirty flag will be true if there are any unsaved changes in the form, and false otherwise. You can use this flag to implement your own logic for handling unsaved changes. For example:

const handleClose = () => {
  if (isDirty) {
    // Show your custom confirmation dialog
    if (confirm("You have unsaved changes. Are you sure you want to close?")) {
      close();
    }
  } else {
    close();
  }
};

const handleClose = () => {
  if (isDirty) {
    // Show your custom confirmation dialog
    if (confirm("You have unsaved changes. Are you sure you want to close?")) {
      close();
    }
  } else {
    close();
  }
};

This approach gives you more control over how you want to handle the unsaved changes warning. For more information on the formState and other properties returned by useModalForm, you can refer to the useModalForm documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

quickest-silverOP•2mo ago

@kapa.ai formState does not exist. Any other suggestion?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous response. You're right that formState is not directly available in useModalForm. Let me provide you with a correct and more appropriate suggestion based on the available knowledge sources. For the Ant Design integration of refine, you can use the formProps returned by useModalForm to access form-related information. Here's a more accurate way to check for unsaved changes:

const { formProps, modalProps, close } = useModalForm();

// You can access the form instance from formProps
const form = formProps.form;

// Check if the form is dirty (has unsaved changes)
const isDirty = form.isFieldsTouched();

const { formProps, modalProps, close } = useModalForm();

// You can access the form instance from formProps
const form = formProps.form;

// Check if the form is dirty (has unsaved changes)
const isDirty = form.isFieldsTouched();

The isFieldsTouched() method from the Ant Design Form instance can be used to determine if any fields in the form have been modified. You can then use this isDirty value to implement your own logic for handling unsaved changes, similar to the example in my previous response:

const handleClose = () => {
  if (isDirty) {
    // Show your custom confirmation dialog
    if (confirm("You have unsaved changes. Are you sure you want to close?")) {
      close();
    }
  } else {
    close();
  }
};

const handleClose = () => {
  if (isDirty) {
    // Show your custom confirmation dialog
    if (confirm("You have unsaved changes. Are you sure you want to close?")) {
      close();
    }
  } else {
    close();
  }
};

This approach should work with the Ant Design integration of refine. For more details on the properties and methods available in useModalForm, you can refer to the useModalForm documentation. If you're using a different UI framework or if this approach doesn't work for your specific setup, please let me know, and I'll try to provide a more tailored solution based on your exact implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Modal form unsaved changes prompt settings

Did you find this page helpful?