unwilling-turquoise•3y ago

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

kapa.ai•3y ago

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: ----------------------

kapa.ai•3y ago

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

unwilling-turquoiseOP•3y ago

@kapa.ai found it. We should use useWarnAboutChange hook from Refine core

kapa.ai•3y ago

Let 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:

import { useWarnWhenUnsavedChanges } from "@pankod/refine";

const [isDirty, setDirty] = useState(false);

useWarnWhenUnsavedChanges(isDirty);

// setDirty to true when there are unsaved changes

import { useWarnWhenUnsavedChanges } from "@pankod/refine";

const [isDirty, setDirty] = useState(false);

useWarnWhenUnsavedChanges(isDirty);

// setDirty to true when there are unsaved changes

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: ----------------------

kapa.ai•3y ago

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

Prevent Navigation Away From Page

Did you find this page helpful?