helpful-purple•12mo ago

warnWhenUnsavedChanges on custom field

Iam using warnWhenUnsavedChanges prop from useForm and works well on Mui fields but I have custom field of my own. when Mui field values are changed, when we try to navigate away it will show an alert I want connect that with my custom field onChange too. I have an onChange in my custom field if i change its value and try to go back, it should show alert or this warnWhenUnsavedChanges should bee triggered

12 Replies

kapa.ai•12mo 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 property in the useForm hook is a feature of the Refine framework that shows a warning when the user tries to leave the page with unsaved changes. This feature is designed to prevent the user from accidentally leaving the page. To use this feature with your custom field, you would need to integrate it with the onChange event of your custom field. However, the provided extracts do not contain specific information on how to achieve this with a custom field. Here is a basic example of how you might use the warnWhenUnsavedChanges property:

useForm({  
 warnWhenUnsavedChanges: true,  
});

useForm({  
 warnWhenUnsavedChanges: true,  
});

kapa.ai•12mo ago

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

helpful-purple•12mo ago

@kapa.ai if warnWhenUnsavedChanges is set to true, how Refine is checking a change it made on a field?

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine's warnWhenUnsavedChanges feature works by monitoring the state of the form fields. When a change is made to a form field, the state of the form is updated. If warnWhenUnsavedChanges is set to true, Refine will check if the current state of the form differs from the initial state (i.e., there are unsaved changes) when the user tries to navigate away from the page. However, the provided extracts do not contain specific details about the internal workings of how Refine checks for changes in form fields when warnWhenUnsavedChanges is set to true. For more detailed information on how Refine checks for changes in form fields, you may need to refer to the official Refine documentation or seek advice from the Refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

helpful-purple•12mo ago

@kapa.ai ok in my form I registered my fiel on name content. initally it is undefined on onChange of that fields, Iam using setValue and make the field value modified. eventhough Iam using warnWhwnUnsavedChanges, it is not working for this fields but working for others

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The warnWhenUnsavedChanges feature in Refine should work for all fields that are part of the form state. If it's not working for your custom field named "content", there might be an issue with how the field is registered or how the setValue function is used. Here's a basic example of how you might use the warnWhenUnsavedChanges property:

useForm({  
 warnWhenUnsavedChanges: true,  
});

useForm({  
 warnWhenUnsavedChanges: true,  
});

This feature can also be set globally in the refine config source (https://refine.dev/docs/api-reference/core/components/refine-config/#warnwhenunsavedchanges). Please note that this feature requires the UnsavedChangesNotifier component to be mounted. You can import this component from your router package source (https://refine.dev/docs/api-reference/core/components/refine-config). If the issue persists, it might be a good idea to check the following: - Ensure that the "content" field is properly registered with the form. - Make sure that the setValue function is correctly updating the state of the "content" field. - Check if there are any errors in the console that might give a clue as to what's going wrong. If you're still having trouble, you may need to refer to the official Refine documentation or seek advice from the Refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

helpful-purple•12mo ago

@kapa.ai Iam calling getValues() to see the changes in fields so i can see initially the form has a field callend content and it is undefined and later when i call setValue and change content, i can see the value for content is changed but still not showing alert when i leave

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The warnWhenUnsavedChanges feature in Refine should trigger a warning when there are unsaved changes in the form and the user tries to navigate away from the page. If you're not seeing the warning even after changing the value of the "content" field, there might be an issue with how the form or the UnsavedChangesNotifier component is set up. Here's a basic example of how you might use the warnWhenUnsavedChanges property:

useForm({  
 warnWhenUnsavedChanges: true,  
});

useForm({  
 warnWhenUnsavedChanges: true,  
});

This feature can also be set globally in the refine config source (https://refine.dev/docs/api-reference/core/components/refine-config/#warnwhenunsavedchanges). Please note that this feature requires the UnsavedChangesNotifier component to be mounted. You can import this component from your router package source (https://refine.dev/docs/api-reference/core/components/refine-config). If the issue persists, it might be a good idea to check the following: - Ensure that the UnsavedChangesNotifier component is properly mounted in your application. - Make sure that the warnWhenUnsavedChanges property is set to true either in the useForm hook or globally in the refine config. - Check if there are any errors in the console that might give a clue as to what's going wrong. If you're still having trouble, you may need to refer to the official Refine documentation or seek advice from the Refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

rising-crimson•12mo ago

If you have custom field, you should handle this logic manually because refine does not know that input. refine is checking unsaved change notifer with help of form providers. for example for react-hook-form, refine uses isDirty state and after submit if isDiry is true, refine are shows warning