[FEAT] Have an optional to reset from when close modal inside `useModalForm`

[Dominic-Preap]

Is your feature request related to a problem? Please describe.

Hi, I would like to have option to reset the form value to defaultValues when use close() in useModalForm hooks.

There are 2 issues, I'm facing:

• When using create useModalForm({refineCoreProps:{action: 'create'}) I want to reset the form when user just close() (cancel by chance) and when user open modal again, the previous value is still there.
• When using edit useModalForm({refineCoreProps:{action: 'edit'}), when close modal and open another modal by call show(id), the previous data is still inside the new modal and waiting to replace after fetch is completed. This will make user experience confuse sometimes when the internet is slow.

To bypass the issue, we call reset() then close().

Describe alternatives you've considered

It would be nice to have another option inside useModalForm when user want to reset form after closing the form not just by summitted. For example

useModalForm({
    refineCoreProps: { action: 'create' },
    defaultValues,
    modalProps: {
      autoResetFormWhenClose: true // <-- something like this
    }
    resolver: valibotResolver(schema)
  });

Additional context

N/A

Describe the thing to improve

N/A

[GANES1998]

@Dominic-Preap and @alicanerdurmaz, I am interested in this issue. Can you please assign it to me? Also, can you please guide me on the solution

[Xajid]

@Dominic-Preap I'd like to work on this one. Please assign it to me, I'd be happy to contribute.

[BatuhanW]

Hey @GANES1998 assigned issue to you, if we don't hear back from you, we'll assign it to @Xajid

[GANES1998]

Hi @BatuhanW, Thanks for assigning to me. I'll work on this.

[bhargavpshah98]

Hey @Dominic-Preap , I am interested to work on this issue. Can you please assign it to me if it is still unsolved ?

[BatuhanW]

@bhargavpshah98 are you still interested working on this issue?

[bhargavpshah98]

Hello @BatuhanW , Yes I am interested

[abdulqdaer-q]

Hey @Dominic-Preap and @alicanerdurmaz , if this is still available can u assign it to me ?

[BatuhanW]

Hey @bhargavpshah98, it seems the notification lost and didn't see your comment. Just assigned to you, looking forward to your PR!

@abdulqdaer-q since @bhargavpshah98 asked earlier, I assigned to him. We can assign to you if he won't work on this one.

[saurabh-619]

hey @BatuhanW, is this issue still open? if so please assign it to me, I'd like to contribute.

[paoloLigsay]

Hi @BatuhanW, I can work on this issue, can you assign this to me if it's still unresolved?

Edit: It seems .resetFields() isn't sufficient to clear the form in useFormModal of the antd package. Do you have any suggestions for the right approach to take?

Additionally, I tried the autoresetForm feature, and it doesn't appear to work correctly either. When I change the title (to trigger the .resetFields() inside the autoresetForm condition) and quickly reopen the modal, the old value appears momentarily before updating to the new value. This is the same issue as with the close modal scenario above.

[aliemir]

Hey everyone! I had some time to break down the issues here.

For the action: "create" persisting the dirty values; I think useModalForm({ resetOnClose: boolean }) can be added for this behavior 🤔

I hope understood correctly @Dominic-Preap, when calling close(); show("1"); modal is kept open and values are reset to the previous value for a moment (until the next fetch is complete). I think when setting the initialValues in useModalForm().formProps we currently do:

https://github.com/refinedev/refine/blob/013e975f15087561435b9e31c813b9d119d19d39/packages/antd/src/hooks/form/useForm.ts#L318

By default, queryOptions.keepPreviousData is set to true by Refine. By changing this to false, I was able to clear the previous values while fetching the new record. 🚀

@paoloLigsay Can you also check if setting keepPreviousData: false helps in your case as well? 🙏

I think the change can be done here in useForm hook of @refinedev/antd and work for useModalForm too.

https://github.com/refinedev/refine/blob/013e975f15087561435b9e31c813b9d119d19d39/packages/antd/src/hooks/form/useForm.ts#L256

If this resolves the issue, we're open to contributions for the fix 🙏

[ahmedmelfay]

autoSubmitClose doesn't appear to be wroking either

[aqir-sapaad]

@BatuhanW can you please assign this to me i will love to contribute .

[BatuhanW]

Hey @aqir-sapaad assigned to you.

[aqir-sapaad]

sorry it was my work email can you please assign to me here @BatuhanW

[KGMaxey]

Ran into this issue myself. I did a little playing around and if I use a create action but still set an id, for example and empty string "", the reset on cancel works.

I traced that id around in code for a bit and it appears that this happens because the resetFields is called in this useEffect: https://github.com/refinedev/refine/blob/26d4065117001290a6f8d94f3f78c37e213b8947/packages/antd/src/hooks/form/useForm.ts#L275

I think this useEffect is triggered when setId(undefined) is called in the handleClose of useModalForm here: https://github.com/refinedev/refine/blob/26d4065117001290a6f8d94f3f78c37e213b8947/packages/antd/src/hooks/form/useModalForm/useModalForm.ts#L292

When the action is set to edit you have to specify an id so setting it to undefined triggers the useEffect. But on create when you don't set an id it's already undefined and doesn't trigger.

[KGMaxey]

Doing this does appear to have the problem of defaultFormValues not being set if I then re-open the create modal though

[ChevrierDev]

Hey, @Dominic-Preap I'd want to contribute to this issue 🚀

[BatuhanW]

Hey @ChevrierDev I've assigned this issue to you.

[armanrozika]

just faced with this issues. Tried to edit and save, and then open the same item, the form is empty. But if i open other items, the value is there again. It seems like when i open the same item (this is probably reading from id), the value didn't get inserted into the form. And, I tried to edit some value and then cancel; then when i open the same item again, the value is the value i cancelled before, not value from data fetching

[abkr08]

Hello @BatuhanW, could you assign this issue to me? I'd love to fix it once and for all.

[armanrozika]

I somehow solved this problem by setting cacheTime:0 and structuralFileSharing:false in the queryOptions