How to disable the submit button after clicking it, and restore it when submits fails?

Hi, I'm using Ant Design to build a very complicated form. However when I click the submit button (both on edit and create pages), it's very slow. I want to make sure after user clicks save, it can disable the save button to avoid duplicated submissions. Is there any way to do that with Refine?
kapa.ai
kapa.ai119d ago
Hi @Eric Hu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine provides a saveButtonProps property that you can use to customize the save button in both <Edit> and <Create> components. This property contains the props needed by the "submit" button. When saveButtonProps.onClick is called, it triggers form.submit(). You can manually pass these props to your custom button. Here is an example of how you can use it:
import { Edit, Create } from "@refinedev/antd";

const PostEdit: React.FC = () => {
return (
<Edit saveButtonProps={{ size: "small", disabled: true }}>
<p>Rest of your page here</p>
</Edit>
);
};

const PostCreate: React.FC = () => {
return (
<Create saveButtonProps={{ size: "small", disabled: true }}>
<p>Rest of your page here</p>
</Create>
);
};
import { Edit, Create } from "@refinedev/antd";

const PostEdit: React.FC = () => {
return (
<Edit saveButtonProps={{ size: "small", disabled: true }}>
<p>Rest of your page here</p>
</Edit>
);
};

const PostCreate: React.FC = () => {
return (
<Create saveButtonProps={{ size: "small", disabled: true }}>
<p>Rest of your page here</p>
</Create>
);
};
In this example, the disabled prop is set to true, which will disable the button. You can set this prop to false when the submission fails to enable the button again. For more information, refer to the <SaveButton> documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/save-button/). Please note that the actual implementation of disabling the button after click and enabling it when submission fails depends on your application's state management and error handling logic. The provided information is based on the extracted content and may require additional steps not covered in the extracts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai119d ago
<@454649036289343500> kapa.ai is still learning and improving, please let us know how it did by reacting below
rare-sapphire
rare-sapphire119d ago
@kapa.ai No, I don't want to disable the button entirely. But disable it after user clicks the save button, and before receiving any response from the server (validation)
kapa.ai
kapa.ai119d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Refine provides a useForm hook that exposes saveButtonProps to be passed to the <SaveButton> component. This includes submitting the form action, button loading, and disable states. Here is an example of how you can use it:
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

const PostEdit: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();

return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
</Form>
</Edit>
);
};

interface IPost {
id: number;
title: string;
}
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

const PostEdit: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();

return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
</Form>
</Edit>
);
};

interface IPost {
id: number;
title: string;
}
In this example, saveButtonProps is passed to the <SaveButton> component. When the form is being submitted, the button will be in a loading state and will be disabled to prevent duplicate submissions. Once the submission is complete or fails, the button will be enabled again. For more information, refer to the <SaveButton> documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/save-button/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai119d ago
<@454649036289343500> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
How to return a specific error message from the backend server for the resource update / create?Hi, I'm using `@nestjsx/crud` adapter with Refine. What I want to do is that I want to rewrite some How to hide resource from sidebarHow can I hide a menu item from sidebar resource? I want to hide some particular menu links from myAdd a a POST api call on an a page when editThanks for an awsome framework. I have a page where i do some edits on some fields. Now I also need Crud api headerHow can i add a auth token to the header that i call if i use infencerSupabase and RBACHow to implement supabase and RBAC in refine?Group Nav buttons in a bulk buttonHi in the CRUD App is there a way to Group Nav buttons in a bulk button that hide and reveal subbuttSupabase- Ability for admin user to add usersHi everyone, I have a client who's plan for a crud app is to disable user signup as it'll be an inteHow to load a component both in Authenticated and Unauthenticated state?How can I arrange my routes to load a component page both in authenticated and unathenticated state?crud operator for text[]Hi guys, I can't filter my field I have a field name superfood which is a text array in supabase db Nextjs app routerHow setup refine using the latest nextjs app router and shadcn uiWhen sidebar is collapsed, changing page on paginated list open sidebar menu itemWhen changing the page, the page and offset query parameter of path is modified and is detected as aUseMany missing in some generated pages by the MUIinferencerWhats the reason why some List pages are generated by the MUIinferencer with the UseMany methods andgraphql mutationi am using graphql for and i want to pass different meta fields for getOne and update using useForm Filter a table field with outside component and stateHi guys, I'm using useTable to get data from database, here is my useTable code ```const filter = sugraphql mutationI am trying to use useForm from ``` import { useForm } from "@refinedev/react-hook-form"; ``` i waUpdate specific field by using mutate useUpdateHi guys, I'm using mutate of useUpdate() to update a record on my db How can I just update a specifi