Prevent Navigation Away From Page
I would like to use the
warnWhenUnsavedChanges
functionality in my own component. I am not using a form, I am using useList
with useUpdate
along with useState
so I can use a non-compatible data grid component. I have a state that I am setting when there are unsaved changes, but how do I prevent the user from navigating away like the useForm
and useEditableTable
hooks do?5 Replies
Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
warnWhenUnsavedChanges
functionality is a feature of the useForm
and useModalForm
hooks in Refine. It is designed to show a warning when the user tries to leave the page with unsaved changes. However, this feature might not work as expected with custom input fields or non-form components.
To use this feature with your custom component, you would need to manually handle this logic because Refine does not know about your custom input or state changes. Refine checks the unsaved change notifier with the help of form providers. For example, for react-hook-form
, Refine uses the isDirty
state and after submit if isDirty
is true, Refine shows a warning.
Unfortunately, there is no out-of-the-box solution for using warnWhenUnsavedChanges
with useList
and useUpdate
hooks or with a non-compatible data grid component. You might need to implement a custom solution to track changes in your component and show a warning when the user tries to navigate away with unsaved changes.
For more information, you can refer to the following documentation:
- useForm (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/)
- useModalForm (https://refine.dev/docs/api-reference/antd/hooks/form/useModalForm/)
- Refine Config (https://refine.dev/docs/api-reference/core/components/refine-config/#warnwhenunsavedchanges)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below
exotic-emeraldOP•15mo ago
@kapa.ai found it. We should use
useWarnAboutChange
hook from Refine coreLet me check the knowledge base for you. One moment! :books:
----------------------
Great! You've found the
useWarnWhenUnsavedChanges
hook from Refine core. This hook can be used to warn the user about unsaved changes when they try to navigate away from the current page.
You can use it in your component like this:
In this example, isDirty
is a state variable that you can control. When isDirty
is true
, the warning will be shown when the user tries to leave the page with unsaved changes. When isDirty
is false
, the warning will not be shown.
Remember to set isDirty
to true
when there are unsaved changes in your component, and set it back to false
when the changes are saved.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below