warnWhenUnsavedChanges
in my create page I have a few mui elemenets and my own custom element. i passed warnWhenUnsavedChanges prop to useForm, so that an alert will trigger if i leave. but it only works on my mui input fields. if i edit any of those fields and try to leave, it will show warning but if i edit my custom input fields and try to leave, there is no warning. inorder to make available for that too, what should i do
5 Replies
Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
warnWhenUnsavedChanges
prop in useForm
or useModalForm
hooks in Refine 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.
To ensure that the warnWhenUnsavedChanges
feature works with your custom input fields, you need to make sure that your custom input fields are properly integrated with the form management system used by Refine. Refine uses React Hook Form
for form management, so your custom input fields should be compatible with it.
Here's how you can set warnWhenUnsavedChanges
to true
:
Also, remember to include the UnsavedChangesNotifier
component in your application. This component enables the warnWhenUnsavedChanges
feature of Refine. It should be placed inside the <Refine>
component's children to enable this feature.
If you're still facing issues, it might be due to the way your custom input fields are implemented. Make sure they are properly integrated with React Hook Form
.
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/packages/documentation/react-hook-form/useModalForm/)
- Refine Config (https://refine.dev/docs/api-reference/core/components/refine-config/)
- Next.js Router (https://refine.dev/docs/packages/documentation/routers/nextjs/)
- Remix Router (https://refine.dev/docs/packages/documentation/routers/remix/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-white•13mo ago
@kapa.ai how to make sure that your custom input fields are properly integrated with the form management system used by Refine
Let me check the knowledge base for you. One moment! :books:
----------------------
Refine uses Ant Design's Form component for form management. To ensure that your custom input fields are properly integrated with Refine's form management system, you need to follow these steps:
1. Your custom input fields should be wrapped within the
Form.Item
component from Ant Design. This allows the form management system to recognize your custom input fields.
2. Your custom input fields should be controllable components. This means they should accept a value
prop and trigger an onChange
event when the value changes. This allows the form management system to control the value of your custom input fields and listen for changes.
3. If your custom input field uses a different prop name for the value or a different event for changes, you can specify these using the valuePropName
and trigger
props of the Form.Item
component.
For more detailed information, you can refer to the Custom Inputs (https://refine.dev/docs/api-reference/antd/components/inputs/custom-inputs/) section in the Refine documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below