rival-black•4w ago

useForm() dirty state is staying across different resource id

Hi, I am trying to build an edit dialog using useForm() in '@refinedev/react-hook-form'. This dialog is used on a resource list page for editing action. I found that useForm() dirty state is staying across different resource id. If I edited one resource and change the name and don't save it, the next I tried to edit a different resource id the "dirtyFields" value are kept. Is there a setting or something I can do to make sure that the dirty state is reseted across different resource id (or even better whenever the dialog is closed and open again, even it is opening up the same resource id)? Thanks.

3 Replies

kapa.ai•4w ago

Hi @gggdddddd. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, this is a known issue and there is a solution for it in Refine's useModalForm and useForm hooks. By default, the dirty state (including dirtyFields and isDirty) can persist across different resource IDs when using dialogs or modals for editing, especially if the form is not reset when switching between records. This can lead to confusion, as you described, where editing a new resource still shows the dirty state from the previous one. Solution: Reset Form State on Modal Close or Resource Change Refine provides a property called autoResetFormWhenClose in useModalForm (and similar behavior can be implemented in useForm) to address this. When set to true, the form will automatically reset (including dirty state) whenever the modal is closed. This ensures that when you open the dialog for a new resource (or even the same resource), the form state is clean and reflects the current data. Example usage:

const modalForm = useModalForm({
  refineCoreProps: { action: "edit" },
  modalProps: {
    autoResetFormWhenClose: true, // This will reset the form on close
  },
});

const modalForm = useModalForm({
  refineCoreProps: { action: "edit" },
  modalProps: {
    autoResetFormWhenClose: true, // This will reset the form on close
  },
});

When autoResetFormWhenClose is true, the form will be reset when the modal closes. Defaults to true see docs.

This property is especially useful for your use case:
- When editing a different resource, the form will reset and fetch the new data, clearing any previous dirty state. - Even if you open the same resource again, the form will reset to the fetched data, not the unsaved changes from before. Additional Notes - If you are using useForm directly (not in a modal), you may need to manually call the reset() method with the new default values when the resource ID changes. - Make sure you provide defaultValues or let Refine fetch the data for the new resource, so the form resets to the correct state see related discussion. References - useModalForm properties: autoResetFormWhenClose - Feature request and discussion on resetting form state If you implement this, the dirty state should no longer persist across different resource IDs or dialog open/close cycles. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@1068416798153789511> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rival-blackOP•4w ago

I tried to reset() when the dialog is closing, but it didn't work. It caused the fields to lose values in the next open.

useForm() dirty state is staying across different resource id

Did you find this page helpful?