extended-yellow•14mo 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•14mo 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•14mo ago

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

quickest-silver•14mo ago

Hello @ganuzaz could you provide us a minimal reproducible example so we can help you?

extended-yellow•14mo ago

i can maybe provide it tomorrow is there a guideline to do the example?

quickest-silver•14mo 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/

extended-yellow•14mo ago

do i use the react hook form useForm or @refinedev/antd because im using the @refinedev/antd

quickest-silver•14mo ago

Then, this one may help you https://refine.dev/docs/api-reference/antd/hooks/form/useForm/

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.

extended-yellow•14mo 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.

extended-yellow•14mo 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

quickest-silver•14mo ago

Happy to hear that your issue is resolved and thanks for the solution! It's useful for other people as a reference