Closing modal after save, gives warning that you are leaving the page.

I have a modal like this:

import { Form, Input, Modal } from "antd";
import { useModalForm } from "@refinedev/antd";
import { useGetToPath, useGo } from "@refinedev/core";
import { useSearchParams } from "react-router-dom";

export const SourceCreate = () => {

  const getToPath = useGetToPath();
  const [searchParams] = useSearchParams();
  const go = useGo();

  const { modalProps, formProps, onFinish, close, form } = useModalForm<any>({
    action: "create",
    resource: "sources",
    defaultVisible: true,
    redirect: false,
    mutationMode: "pessimistic",

  });

  const handleFinish = async (values: any) => {
    try {
      await onFinish(values);

      close();
      navigateToList();
    } catch (error) {
      console.error(error);
    }
  };

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

  return (
    <Modal
      {...modalProps}
      title="Create Source"
      onCancel={() => {
        close();
        navigateToList();
      }}
    >
      <Form
        {...formProps}
        layout="vertical"
        onFinish={handleFinish}
      >
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

import { Form, Input, Modal } from "antd";
import { useModalForm } from "@refinedev/antd";
import { useGetToPath, useGo } from "@refinedev/core";
import { useSearchParams } from "react-router-dom";

export const SourceCreate = () => {

  const getToPath = useGetToPath();
  const [searchParams] = useSearchParams();
  const go = useGo();

  const { modalProps, formProps, onFinish, close, form } = useModalForm<any>({
    action: "create",
    resource: "sources",
    defaultVisible: true,
    redirect: false,
    mutationMode: "pessimistic",

  });

  const handleFinish = async (values: any) => {
    try {
      await onFinish(values);

      close();
      navigateToList();
    } catch (error) {
      console.error(error);
    }
  };

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

  return (
    <Modal
      {...modalProps}
      title="Create Source"
      onCancel={() => {
        close();
        navigateToList();
      }}
    >
      <Form
        {...formProps}
        layout="vertical"
        onFinish={handleFinish}
      >
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

When I hit save, it is giving the "Are you sure you want to leave? You have unsaved changes." alert despite actually saving.

3 Replies

kapa.ai•7d ago

Hi @Jonathan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're encountering is related to the warnWhenUnsavedChanges property and how the onFinish function is being handled in your modal form. According to the documentation, the onFinish function from formProps will handle closing the modal internally and is important for features like the unsaved changes notifier. To resolve this issue, you should ensure that you are using the onFinish function from formProps correctly and avoid manually calling close() after onFinish. Here is the corrected version of your code:

import { Form, Input, Modal } from "antd";
import { useModalForm } from "@refinedev/antd";
import { useGetToPath, useGo } from "@refinedev/core";
import { useSearchParams } from "react-router-dom";

export const SourceCreate = () => {

  const getToPath = useGetToPath();
  const [searchParams] = useSearchParams();
  const go = useGo();

  const { modalProps, formProps, onFinish, close, form } = useModalForm<any>({
    action: "create",
    resource: "sources",
    defaultVisible: true,
    redirect: false,
    mutationMode: "pessimistic",
  });

  const handleFinish = async (values: any) => {
    try {
      await onFinish(values);
      navigateToList();
    } catch (error) {
      console.error(error);
    }
  };

  const navigateToList = () => {
    go({
      to: searchParams.get("to") ?? getToPath({ action: "list" }) ?? "",
      query: { to: undefined },
      options: { keepQuery: true },
      type: "replace",
    });
  };
return (
    <Modal
      {...modalProps}
      title="Create Source"
      onCancel={() => {
        close();
        navigateToList();
      }}
    >
      <Form
        {...formProps}
        layout="vertical"
        onFinish={handleFinish}
      >
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

import { Form, Input, Modal } from "antd";
import { useModalForm } from "@refinedev/antd";
import { useGetToPath, useGo } from "@refinedev/core";
import { useSearchParams } from "react-router-dom";

export const SourceCreate = () => {

  const getToPath = useGetToPath();
  const [searchParams] = useSearchParams();
  const go = useGo();

  const { modalProps, formProps, onFinish, close, form } = useModalForm<any>({
    action: "create",
    resource: "sources",
    defaultVisible: true,
    redirect: false,
    mutationMode: "pessimistic",
  });

  const handleFinish = async (values: any) => {
    try {
      await onFinish(values);
      navigateToList();
    } catch (error) {
      console.error(error);
    }
  };

  const navigateToList = () => {
    go({
      to: searchParams.get("to") ?? getToPath({ action: "list" }) ?? "",
      query: { to: undefined },
      options: { keepQuery: true },
      type: "replace",
    });
  };
return (
    <Modal
      {...modalProps}
      title="Create Source"
      onCancel={() => {
        close();
        navigateToList();
      }}
    >
      <Form
        {...formProps}
        layout="vertical"
        onFinish={handleFinish}
      >
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

In this updated code, the handleFinish function awaits the onFinish function from formProps, which will handle closing the modal and other necessary actions internally. This should prevent the "Are you sure you want to leave? You have unsaved changes." alert from appearing after saving. For more information, you can refer to the useModalForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#close). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@697199226802929705> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-rose•7d ago

also why on this form would there be a delay on entering data in the name field