flat-fuchsia•11mo ago

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

kapa.ai•11mo ago

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:

useForm({  
 warnWhenUnsavedChanges: true,  
});

useForm({  
 warnWhenUnsavedChanges: 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.

import { Refine } from "@refinedev/core";  
import { UnsavedChangesNotifier } from "@refinedev/nextjs-router";  
  
function App({ Component, pageProps }: AppProps): JSX.Element {  
 return (  
 <Refine  
 /* ... */  
 >  
 <Component {...pageProps} />  
 <UnsavedChangesNotifier />  
 </Refine>  
 );  
}

import { Refine } from "@refinedev/core";  
import { UnsavedChangesNotifier } from "@refinedev/nextjs-router";  
  
function App({ Component, pageProps }: AppProps): JSX.Element {  
 return (  
 <Refine  
 /* ... */  
 >  
 <Component {...pageProps} />  
 <UnsavedChangesNotifier />  
 </Refine>  
 );  
}

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

kapa.ai•11mo ago

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

flat-fuchsia•11mo ago

@kapa.ai how to make sure that your custom input fields are properly integrated with the form management system used by Refine

kapa.ai•11mo ago

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.

<Form.Item
 label="Title"
 name="title"
 rules={[
 {
   required: true,
 },
 ]}
>
 <YourCustomInputComponent />
</Form.Item>

<Form.Item
 label="Title"
 name="title"
 rules={[
 {
   required: true,
 },
 ]}
>
 <YourCustomInputComponent />
</Form.Item>

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.

const YourCustomInputComponent = ({ value, onChange }) => {
 // Your custom input logic here
};

const YourCustomInputComponent = ({ value, onChange }) => {
 // Your custom input logic here
};

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.

<Form.Item
 label="Title"
 name="title"
 valuePropName="yourValuePropName"
 trigger="yourChangeEvent"
>
 <YourCustomInputComponent />
</Form.Item>

<Form.Item
 label="Title"
 name="title"
 valuePropName="yourValuePropName"
 trigger="yourChangeEvent"
>
 <YourCustomInputComponent />
</Form.Item>

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

kapa.ai•11mo ago

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