wise-white•4w ago

form values revert to old values just after submit is pressed

@kapa.ai using antd editDrawerForm, the new values get passed to the mutation and everything works, but just after submitting the form input values revert to their original values. How can I keep this from happening?

5 Replies

kapa.ai•4w ago

Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you are experiencing an issue where the form values revert to their original values after submission when using editDrawerForm in Ant Design. This behavior might be related to the form resetting itself after submission. To address this issue, you can try the following steps: 1. Disable Auto Reset: Ensure that the autoResetForm property is set to false. By default, autoResetForm is true, which resets the form after a successful submit. You can disable this by setting it to false.

const drawerForm = useDrawerForm({
  autoResetForm: false,
});

const drawerForm = useDrawerForm({
  autoResetForm: false,
});

2. Check formProps.onFinish: Make sure you are using formProps.onFinish to handle the form submission. This method handles the closing of the drawer and clearing the fields under the hood, which might be causing the reset behavior. Here is an example of how you can set up your editDrawerForm:

import { Edit, Drawer, useDrawerForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

export const UserEdit: React.FC = () => {
  const { formProps, drawerProps, saveButtonProps } = useDrawerForm({
    action: "edit",
    autoResetForm: false, // Ensure autoResetForm is set to false
  });

  const handleOnFinish = (values) => {
    // Modify the data before sending it to the server if needed
    formProps.onFinish?.({
      ...values,
    });
  };

  return (
    <Drawer {...drawerProps}>
      <Edit saveButtonProps={saveButtonProps}>
        <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
          <Form.Item label="Name" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="Surname" name="surname">
            <Input />
          </Form.Item>
        </Form>
      </Edit>
    </Drawer>
  );
};

import { Edit, Drawer, useDrawerForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

export const UserEdit: React.FC = () => {
  const { formProps, drawerProps, saveButtonProps } = useDrawerForm({
    action: "edit",
    autoResetForm: false, // Ensure autoResetForm is set to false
  });

  const handleOnFinish = (values) => {
    // Modify the data before sending it to the server if needed
    formProps.onFinish?.({
      ...values,
    });
  };

  return (
    <Drawer {...drawerProps}>
      <Edit saveButtonProps={saveButtonProps}>
        <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
          <Form.Item label="Name" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="Surname" name="surname">
            <Input />
          </Form.Item>
        </Form>
      </Edit>
    </Drawer>
  );
};

By ensuring autoResetForm is set to false and using formProps.onFinish, you should be able to prevent the form from resetting to its original values after submission. For more details, you can refer to the documentation on autoResetForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form/#autoresetform) and formProps (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form/#formprops). If the issue persists, please provide more details or check if there are any other custom behaviors in your form that might be causing the reset. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

wise-white•4w ago

@kapa.ai perfect thx

kapa.ai•4w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It sounds like you are experiencing an issue where the form values revert to their original values after submission when using editDrawerForm in Ant Design. This behavior might be related to the form resetting itself after submission. To address this issue, you can try the following steps: 1. Disable Auto Reset: Ensure that the autoResetForm property is set to false. By default, autoResetForm is true, which resets the form after a successful submit. You can disable this by setting it to false.

const drawerForm = useDrawerForm({
  autoResetForm: false,
});

const drawerForm = useDrawerForm({
  autoResetForm: false,
});

import { Edit, Drawer, useDrawerForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

export const UserEdit: React.FC = () => {
  const { formProps, drawerProps, saveButtonProps } = useDrawerForm({
    action: "edit",
    autoResetForm: false, // Ensure autoResetForm is set to false
  });

  const handleOnFinish = (values) => {
    // Modify the data before sending it to the server if needed
    formProps.onFinish?.({
      ...values,
    });
  };

  return (
    <Drawer {...drawerProps}>
      <Edit saveButtonProps={saveButtonProps}>
        <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
          <Form.Item label="Name" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="Surname" name="surname">
            <Input />
          </Form.Item>
        </Form>
      </Edit>
    </Drawer>
  );
};

import { Edit, Drawer, useDrawerForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import React from "react";

export const UserEdit: React.FC = () => {
  const { formProps, drawerProps, saveButtonProps } = useDrawerForm({
    action: "edit",
    autoResetForm: false, // Ensure autoResetForm is set to false
  });

  const handleOnFinish = (values) => {
    // Modify the data before sending it to the server if needed
    formProps.onFinish?.({
      ...values,
    });
  };

  return (
    <Drawer {...drawerProps}>
      <Edit saveButtonProps={saveButtonProps}>
        <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
          <Form.Item label="Name" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="Surname" name="surname">
            <Input />
          </Form.Item>
        </Form>
      </Edit>
    </Drawer>
  );
};

kapa.ai•4w ago

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