Closing modal after save, gives warning that you are leaving the page.
I have a modal like this:
When I hit save, it is giving the "Are you sure you want to leave? You have unsaved changes." alert despite actually saving.
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.
