Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Dominic-Preap opened this issue May 16, 2024 · 26 comments
Assignees
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@Dominic-Preap
Copy link
Contributor

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

@Dominic-Preap Dominic-Preap added the enhancement New feature or request label May 16, 2024
@alicanerdurmaz alicanerdurmaz added the good first issue Good for newcomers label May 21, 2024
@GANES1998
Copy link

@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
Copy link

Xajid commented May 26, 2024

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

@BatuhanW
Copy link
Member

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

@GANES1998
Copy link

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

@bhargavpshah98
Copy link

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

@BatuhanW
Copy link
Member

@bhargavpshah98 are you still interested working on this issue?

@bhargavpshah98
Copy link

Hello @BatuhanW , Yes I am interested

@abdulqdaer-q
Copy link

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

@BatuhanW
Copy link
Member

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
Copy link

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

@paoloLigsay
Copy link

paoloLigsay commented Jul 12, 2024

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
Copy link
Member

aliemir commented Jul 28, 2024

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:

initialValues: queryResult?.data?.data,

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.

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

@aliemir aliemir added this to the August Release milestone Jul 28, 2024
@ahmedmelfay
Copy link

autoSubmitClose doesn't appear to be wroking either

@aliemir aliemir removed this from the August Release milestone Aug 6, 2024
@aqir-sapaad
Copy link

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

@BatuhanW
Copy link
Member

Hey @aqir-sapaad assigned to you.

@aqir-sapaad
Copy link

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

@KGMaxey
Copy link

KGMaxey commented Aug 23, 2024

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:

React.useEffect(() => {

I think this useEffect is triggered when setId(undefined) is called in the handleClose of useModalForm here:

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
Copy link

KGMaxey commented Aug 23, 2024

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

@ChevrierDev
Copy link

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

@BatuhanW
Copy link
Member

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

@armanrozika
Copy link

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
Copy link

abkr08 commented Oct 30, 2024

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

@armanrozika
Copy link

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

@imHardik1606
Copy link

Hi there.

If this issue is still unsolved. I would like to work on this feature to add an optional state reset when closing the modal inside useModalForm. Could you please assign this issue to me?

Thank you!

@BatuhanW
Copy link
Member

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

Assigned issue to you.

@imHardik1606 if we don't hear back from @abkr08, we'll assign it to you.

@abkr08
Copy link

abkr08 commented Nov 20, 2024

Thanks, @BatuhanW. I will get it sorted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests