exotic-emerald
exotic-emerald12mo ago

useForm doesn't redirect and useDrawerForm doesn't auto close after form has been submitted

useForm doesn't redirect even with specified redirect("show"). But other useForm works. I don't know what caused this. Checked for event stop propagation useForm
const { formProps, onFinish, saveButtonProps, queryResult, form } = useForm<IDataClass>({
action: "edit",
resource: "data",
id: params.id
});
const { formProps, onFinish, saveButtonProps, queryResult, form } = useForm<IDataClass>({
action: "edit",
resource: "data",
id: params.id
});
Form component

<Form {...formProps}
name="dynamic_form_item"
layout="vertical"
onFinish={onSubmit}
>

<Form {...formProps}
name="dynamic_form_item"
layout="vertical"
onFinish={onSubmit}
>
onSubmit
const onSubmit = async (obj: any) => {
const formData = new FormData();
...
await onFinish(formData);
redirect("list")
};
const onSubmit = async (obj: any) => {
const formData = new FormData();
...
await onFinish(formData);
redirect("list")
};
as for useDrawerForm it doesn't auto close for some reason even though it auto closes in v3
10 Replies
kapa.ai
kapa.ai12mo ago
Hi @ganuzaz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, I can provide you with some helpful documentation on useForm and useDrawerForm: - useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm) - useDrawerForm documentation (https://refine.dev/docs/api-reference/mantine/hooks/form/useDrawerForm) Please review these resources to see if they can help you identify the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@149140198213550080> kapa.ai is still learning and improving, please let us how it did by reacting below
provincial-silver
provincial-silver12mo ago
Hello @ganuzaz could you provide us a minimal reproducible example so we can help you?
exotic-emerald
exotic-emerald12mo ago
i can maybe provide it tomorrow is there a guideline to do the example?
provincial-silver
provincial-silver12mo ago
You can use stackblitz or codesandbox, it's easy and interactive Also I suggest checking our documentation, you might be overlooked something: https://refine.dev/docs/packages/documentation/react-hook-form/useForm/
exotic-emerald
exotic-emerald12mo ago
do i use the react hook form useForm or @refinedev/antd because im using the @refinedev/antd
provincial-silver
provincial-silver12mo ago
useForm | refine
useForm is used to manage forms. It returns the necessary properties and methods to control the Antd Form. Also, it has been developed by using useForm imported from @refinedev/core package.
exotic-emerald
exotic-emerald12mo ago
i tried this https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#redirect-1 but with different parameter class and without the e.preventDefault(). Just the redirect. But it doesn't work
useForm | refine
useForm is used to manage forms. It returns the necessary properties and methods to control the Antd Form. Also, it has been developed by using useForm imported from @refinedev/core package.
exotic-emerald
exotic-emerald12mo ago
I'm just gonna use navigate maybe for now, i'll try to create an example thursday maybe ok i found out why basically i had this in resources
{
name: "config",
meta: {
label : "config",
icon: <IoCashOutline/>,
}
},
{
name: "config/data",
meta: {
label: "Config Data",
parent: "config",
icon: <IoRepeat />,
},
list: ListConfigData,
create: CreateConfigData,
show: ShowConfigData,
edit: EditConfigData,
},
{
name: "config",
meta: {
label : "config",
icon: <IoCashOutline/>,
}
},
{
name: "config/data",
meta: {
label: "Config Data",
parent: "config",
icon: <IoRepeat />,
},
list: ListConfigData,
create: CreateConfigData,
show: ShowConfigData,
edit: EditConfigData,
},
and it doesn't redirect the redirect works if i change it into
{
name: "config",
meta: {
label : "config",
icon: <IoCashOutline/>,
}
},
{
name: "data",
meta: {
label: "Config Data",
parent: "config",
icon: <IoRepeat />,
},
list: ListConfigData,
create: CreateConfigData,
show: ShowConfigData,
edit: EditConfigData,
},
{
name: "config",
meta: {
label : "config",
icon: <IoCashOutline/>,
}
},
{
name: "data",
meta: {
label: "Config Data",
parent: "config",
icon: <IoRepeat />,
},
list: ListConfigData,
create: CreateConfigData,
show: ShowConfigData,
edit: EditConfigData,
},
but the page will be http://localhost/data instead of http://localhost/config/data
const { formProps, onFinish, saveButtonProps, redirect } = useForm<IConfigData>({
action: "create",
resource: "data",
redirect : false,
onMutationSuccess : ()=>{
list("config/data")
}
});
const { formProps, onFinish, saveButtonProps, redirect } = useForm<IConfigData>({
action: "create",
resource: "data",
redirect : false,
onMutationSuccess : ()=>{
list("config/data")
}
});
I have to do this if the name is config/data, because it wont redirect properly
provincial-silver
provincial-silver12mo ago
Happy to hear that your issue is resolved and thanks for the solution! It's useful for other people as a reference