wet-aquaW
Refine17mo ago
5 replies
wet-aqua

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>
  );
};


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