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
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:
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:
----------------------<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below
probable-pink•6mo ago
@kapa.ai can I use something like ... for the onClick and add functionality which disables the button?
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:
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:
----------------------<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below