dependent-tan•3w ago

Unsaved changes.

Hi, I don't know what I am doing wrong, I have built other pages, and I don't have a problem, but on this specific one, I cannot figure out what I am doing wrong. When I press save, I get the pop-up saying I have unsaved changes. How can I solve this? I don't want to lose the reminder. I just want to save without that alert ```

message.txt

2 Replies

kapa.ai•3w ago

Hi @hsdmiranda. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address the issue of getting an unsaved changes pop-up when pressing save, there are a few things we can check and adjust. This behavior is related to the warnWhenUnsavedChanges feature in refine. Here's how you can solve this: 1. First, make sure you're using the onFinish method from the useForm hook correctly. The onFinish method should handle the form submission and update the data. 2. If you're using a custom save button, ensure you're calling the onFinish method properly. Here's an example of how to implement a custom save button:

const { onFinish, ...formProps } = useForm();

const handleSave = async (values) => {
  await onFinish(values);
  // Additional logic if needed
};

return (
  <Form {...formProps} onFinish={handleSave}>
    {/* Form fields */}
    <SaveButton onClick={handleSave}>Save</SaveButton>
  </Form>
);

const { onFinish, ...formProps } = useForm();

const handleSave = async (values) => {
  await onFinish(values);
  // Additional logic if needed
};

return (
  <Form {...formProps} onFinish={handleSave}>
    {/* Form fields */}
    <SaveButton onClick={handleSave}>Save</SaveButton>
  </Form>
);

3. If you're using useModalForm, make sure to await the onFinish call before closing the modal:

const handleFormSubmit = async (values) => {
  await onFinish(values);
  close();
};

const handleFormSubmit = async (values) => {
  await onFinish(values);
  close();
};

4. If you still encounter issues, you can disable the warnWhenUnsavedChanges feature for this specific form:

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

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

5. Make sure you have the <UnsavedChangesNotifier /> component properly placed in your app structure if you want to use this feature globally. If you're still experiencing issues after trying these solutions, it would be helpful to see more of your specific code to identify any potential problems. For more detailed information on handling unsaved changes and form submissions, you can refer to the following resources: - Refine useForm Hook Documentation - Refine Unsaved Changes Guide Remember, the warnWhenUnsavedChanges feature is designed to prevent accidental data loss, so make sure you're handling the form submission correctly to avoid unnecessary warnings. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Unsaved changes.

Did you find this page helpful?