Refine•3y ago

Prevent Navigation Away From Page

I would like to use the

warnWhenUnsavedChanges

warnWhenUnsavedChanges

functionality in my own component. I am not using a form, I am using

useList

useList

with

useUpdate

useUpdate

along with

useState

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

useForm

and

useEditableTable

useEditableTable

hooks do?

kapa.ai•10/31/23, 11:40 PM

Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•10/31/23, 11:41 PM

----------------------
The

warnWhenUnsavedChanges

warnWhenUnsavedChanges

functionality is a feature of the

useForm

useForm

and 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 , Refine uses the state and after submit if is true, Refine shows a warning.

Unfortunately, there is no out-of-the-box solution for using

warnWhenUnsavedChanges

warnWhenUnsavedChanges

with

useList

useList

and

useUpdate

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

kapa.ai•10/31/23, 11:41 PM

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

abstract-purpleOP•11/1/23, 12:20 AM

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

kapa.ai•11/1/23, 12:20 AM

Let me check the knowledge base for you. One moment!

kapa.ai•11/1/23, 12:21 AM

----------------------
Great! You've found the 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, is a state variable that you can control. When is , the warning will be shown when the user tries to leave the page with unsaved changes. When is

false

false

, the warning will not be shown.

Remember to set to when there are unsaved changes in your component, and set it back to

false

false

when the changes are saved.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•11/1/23, 12:21 AM

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