continuing-cyan•4mo ago

Disable save button on edit page

How would I disable save button on edit/create page once user clicks on it? I have API request in my onFinish function so it taks a second to resolve and the button can be clicked in the meantime - I don't want that

5 Replies

kapa.ai•4mo ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can disable the Save button on the Edit/Create page once the user clicks on it by using the formLoading state provided by the useForm hook in Refine. This state becomes true when the form is submitting, and false when it's not. You can pass this state to the disabled prop of the Save button through saveButtonProps. Here's an example of how you can do this:

import { useForm } from "@refinedev/react-hook-form";  
import { Edit } from "@refinedev/mui";  
  
const PostEdit: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm<ICategory>();  
  
 return (  
 <Edit  
 isLoading={formLoading}  
 saveButtonProps={{ onClick: handleSubmit(onFinish), disabled: formLoading }}  
 >  
 // Rest of your form here
 </Edit>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  
import { Edit } from "@refinedev/mui";  
  
const PostEdit: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm<ICategory>();  
  
 return (  
 <Edit  
 isLoading={formLoading}  
 saveButtonProps={{ onClick: handleSubmit(onFinish), disabled: formLoading }}  
 >  
 // Rest of your form here
 </Edit>  
 );  
};

In this example, the Save button will be disabled while the form is submitting, preventing the user from clicking it multiple times. For more information, you can refer to the documentation on SaveButtonProps (https://refine.dev/docs/ui-integrations/material-ui/components/basic-views/edit#savebuttonprops) and useForm (https://refine.dev/docs/data/hooks/use-form/) hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

continuing-cyan•4mo ago

@kapa.ai can I use something like ... for the onClick and add functionality which disables the button?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the spread operator (...) to pass all the existing properties to the saveButtonProps and then add your own onClick function. In this function, you can set a state that disables the button. Here's an example:

import { useForm } from "@refinedev/react-hook-form";  
import { Edit } from "@refinedev/mui";  
import { useState } from "react";
  
const PostEdit: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm<ICategory>();  

 const [buttonDisabled, setButtonDisabled] = useState(false);

 const handleClick = () => {
   setButtonDisabled(true);
   handleSubmit(onFinish)();
 }

 return (  
 <Edit  
 isLoading={formLoading}  
 saveButtonProps={{ ...saveButtonProps, onClick: handleClick, disabled: buttonDisabled }}  
 >  
 // Rest of your form here
 </Edit>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  
import { Edit } from "@refinedev/mui";  
import { useState } from "react";
  
const PostEdit: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm<ICategory>();  

 const [buttonDisabled, setButtonDisabled] = useState(false);

 const handleClick = () => {
   setButtonDisabled(true);
   handleSubmit(onFinish)();
 }

 return (  
 <Edit  
 isLoading={formLoading}  
 saveButtonProps={{ ...saveButtonProps, onClick: handleClick, disabled: buttonDisabled }}  
 >  
 // Rest of your form here
 </Edit>  
 );  
};

In this example, when the Save button is clicked, the handleClick function is called, which sets buttonDisabled to true and then calls the handleSubmit(onFinish) function. The Save button will be disabled until buttonDisabled is set back to false. Please note that you need to handle the case when the API request is finished and set buttonDisabled back to false to enable the button again. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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