feat: add autoResetFormWhenClose option to useModalForm hook

[amulyavarshney]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://refine.dev/docs/guides-concepts/contributing/#commit-convention
• Related issue(s) linked
• Tests for the changes have been added
• Docs have been added / updated
• Changesets have been added https://refine.dev/docs/guides-concepts/contributing/#creating-a-changeset

What is the current behavior?

Currently, the useModalForm hook has two UX issues:

1. Create Action: When using useModalForm({refineCoreProps:{action: 'create'}}), if a user fills some fields then closes the modal without submitting, the next time they open the modal, the previous values are still there.

2. Edit Action: When using useModalForm({refineCoreProps:{action: 'edit'}}), when closing a modal and opening another modal by calling show(id), the previous data is still visible while waiting for new data to be fetched. This creates confusion when the internet is slow.

Users currently need to manually call reset() then close() to work around these issues.

What is the new behavior?

Added a new autoResetFormWhenClose option to the modalProps configuration of useModalForm that automatically resets the form to defaultValues when the modal is closed.

Usage Example:

useModalForm({
  refineCoreProps: { action: 'create' },
  defaultValues: { name: '', email: '' },
  modalProps: {
    autoResetFormWhenClose: true // New option
  },
  resolver: valibotResolver(schema)
});

Key Features:

• Default Value: true (enabled by default for better UX)
• Backward Compatible: Existing code continues to work as before
• Cross-Package Support: Implemented consistently across all form packages
• Smart Reset: Only resets when modal is actually closed, not on other form actions

Implementation Details:

• @refinedev/react-hook-form: Calls reset() in handleClose
• @refinedev/antd: Calls form.resetFields() in handleClose
• @refinedev/mantine: Calls reset() in handleClose

Packages Modified

1. @refinedev/react-hook-form

   • Added autoResetFormWhenClose?: boolean to UseModalFormProps
   • Updated handleClose to call reset() when option is enabled
   • Added comprehensive test cases

2. @refinedev/antd

   • Added autoResetFormWhenClose?: boolean to UseModalFormProps
   • Updated handleClose to call form.resetFields() when option is enabled

3. @refinedev/mantine

   • Added autoResetFormWhenClose?: boolean to UseModalFormProps
   • Updated handleClose to call reset() when option is enabled

Tests Added

Added test cases for @refinedev/react-hook-form:

• ✅ Verifies reset is called when autoResetFormWhenClose: true and modal is closed
• ✅ Verifies reset is NOT called when autoResetFormWhenClose: false
• ✅ Tests behavior for both create and edit actions

Breaking Changes

None - This is a backward-compatible enhancement. All existing code continues to work exactly as before.

Notes for reviewers

• The feature is enabled by default (autoResetFormWhenClose: true) to provide better UX out of the box
• Implementation is consistent across all three form packages (react-hook-form, antd, mantine)
• The reset happens in the handleClose function which is triggered by all modal close actions (close button, ESC key, outside click, programmatic close)
• Tests ensure the feature works correctly and doesn't interfere with existing functionality
• TypeScript types are properly updated to include the new option with appropriate JSDoc documentation

This enhancement directly addresses the user experience issues mentioned in the original issue while maintaining full backward compatibility.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9b79a01

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for refine-doc-live-previews ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9b79a01
🔍 Latest deploy log	https://app.netlify.com/projects/refine-doc-live-previews/deploys/6848200d342bbb00089c8262
😎 Deploy Preview	https://deploy-preview-6835--refine-doc-live-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.