how to reset modal component state on close?
this is in my modal component:
If the user closes the modal, I would want
isEnabled
to reset. I figured using destoryOnClose
would fix this issue but it doesnt.2 Replies
Hi @Syn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In your case, you can use the
autoResetForm
property of the useModalForm
or useDrawerForm
hooks provided by Refine. When autoResetForm
is set to true
, the form will be reset after a successful submit. It is true
by default.
Here is an example of how you can use it:
However, this will only reset the form fields, not the isEnabled
state. To reset the isEnabled
state when the modal is closed, you can use the onCancel
prop of the Modal
component to set isEnabled
back to false
.
Here is how you can do it:
In this way, whenever the modal is closed, isEnabled
will be set back to false
.
Please note that the destroyOnClose
prop you're using only destroys the modal's elements from the DOM when it's closed, it doesn't reset any state or form fields.
For more information, you can refer to the following documentation:
- useModalForm (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form#autoresetform)
- useDrawerForm (https://refine.dev/docs/ui-integrations/mantine/hooks/use-drawer-form#autoresetform)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below