KHi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. 
K----------------------
It seems like you're experiencing issues with the
It seems like you're experiencing issues with the
autoResetForm property in the useModalForm hook not resetting all fields as expected. Here are some key points and potential solutions based on the provided knowledge sources:- **Default Behavior**:
- The
autoResetFormproperty is designed to reset the form after a successful submit and is
by default.true - For Ant Design:```javascriptconst modalForm = useModalForm({ autoResetForm: false, }); ```**Source** (<https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#autoresetform>)
- For Mantine:```javascriptconst modalForm = useModalForm({ modalProps: { autoResetForm: false, }, }); ```**Source** (<https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form/#autoresetform>)
- The
- **Known Issues**:
- There are known issues where
autoResetFormdoes not work correctly in some scenarios. For example, when changing the title to trigger.resetFields()inside theautoResetFormcondition, the old value might appear momentarily before updating to the new value. - This issue is discussed in a GitHub issue (https://github.com/refinedev/refine/issues/5954) where users have reported that
.resetFields()isn't sufficient to clear the form inuseFormModalof the
package.antd
- There are known issues where
K- **Potential Workaround**:
- A suggested workaround is to manually call
reset()before closing the modal. This ensures that the form is reset to its default values when the modal is closed. - Example:
Source (https://github.com/refinedev/refine/issues/5954)
- A suggested workaround is to manually call
- **Additional Considerations**:
- Ensure that the
initialValuesare set correctly inuseModalForm().formPropsto avoid issues with stale data. - If you are using
useDrawerForm, similar issues and solutions apply as discussed in the GitHub issue (https://github.com/refinedev/refine/issues/756).
- Ensure that the
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@422289470487003153 kapa.ai is still learning and improving, please let us know how it did by reacting below
S@kapa.ai i am using mui
KLet me check the knowledge base for you. One moment! 
K----------------------
If you are using MUI and experiencing issues with the
If you are using MUI and experiencing issues with the
autoResetForm property not resetting all fields, here are some key points and potential solutions based on the provided knowledge sources:- **Default Behavior**:
- The
autoResetFormproperty is designed to reset the form after a successful submit and is
by default.true - For MUI, you can configure it as follows:
Source (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form/#autoresetform)
- The
- **Known Issues**:
- There are known issues where
autoResetFormdoes not work correctly in some scenarios. For example, when changing the title to trigger.resetFields()inside theautoResetFormcondition, the old value might appear momentarily before updating to the new value. - This issue is discussed in a GitHub issue (https://github.com/refinedev/refine/issues/5954) where users have reported that
.resetFields()isn't sufficient to clear the form inuseFormModalof the
package. Although this is specific to Ant Design, similar issues might occur with MUI.antd
- There are known issues where
- **Potential Workaround**:
- A suggested workaround is to manually call
reset()before closing the modal. This ensures that the form is reset to its default values when the modal is closed. - Example:
Source (https://github.com/refinedev/refine/issues/5954)
- A suggested workaround is to manually call
K- Additional Considerations:
- Ensure that the
initialValuesare set correctly inuseModalForm().formPropsto avoid issues with stale data. - If you are using
useDrawerForm, similar issues and solutions apply as discussed in the GitHub issue (https://github.com/refinedev/refine/issues/756).
- Ensure that the
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@422289470487003153 kapa.ai is still learning and improving, please let us know how it did by reacting below
S@kapa.ai so if i dont have inital values it wont reset
KLet me check the knowledge base for you. One moment!
K----------------------
If you don't have initial values set, the form might not reset as expected. This is because the reset functionality relies on the initial values to determine what the form should be reset to. Here are some key points and potential solutions based on the provided knowledge sources:
If you don't have initial values set, the form might not reset as expected. This is because the reset functionality relies on the initial values to determine what the form should be reset to. Here are some key points and potential solutions based on the provided knowledge sources:
- **Default Behavior**:
- The
autoResetFormproperty is designed to reset the form after a successful submit and is
by default.true - For MUI, you can configure it as follows:
Source (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form/#autoresetform)
- The
- **Initial Values**:
- If you don't have initial values set, the form might not reset correctly because it doesn't know what values to reset to.
- Ensure that you provide initial values to the form to enable proper resetting.
- **Potential Workaround**:
- A suggested workaround is to manually call
reset()before closing the modal. This ensures that the form is reset to its default values when the modal is closed. - Example:
Source (https://github.com/refinedev/refine/issues/5954)
- A suggested workaround is to manually call
- **Additional Considerations**:
- Ensure that the
initialValuesare set correctly inuseModalForm().formPropsto avoid issues with stale data. - If you are using
useDrawerForm, similar issues and solutions apply as discussed in the GitHub issue (https://github.com/refinedev/refine/issues/756).
- Ensure that the
KIf these solutions do not resolve your issue, you might want to follow up on the relevant GitHub issues or refer to the official documentation (https://refine.dev/docs) for more detailed guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@422289470487003153 kapa.ai is still learning and improving, please let us know how it did by reacting below
S@kapa.ai still seems to not rest all fields is there a way to manually call reset
KLet me check the knowledge base for you. One moment!
K----------------------
If the
import { useModalForm } from "@refinedev/mui";
import { useForm } from "react-hook-form";
import { useEffect } from "react";
const MyComponent = () => {
const { formInstance, modalProps } = useModalForm({
refineCoreProps: { action: 'create' },
defaultValues: {
title: "",
subtitle: "",
content: "",
},
modalProps: {
autoResetForm: false, // Disable auto reset if it's not working as expected
},
});
const { reset } = formInstance;
// Manually call reset when the modal is closed
useEffect(() => {
if (!modalProps.open) {
reset();
}
}, [modalProps.open, reset]);
If the
autoResetForm property is not resetting all fields as expected, you can manually call the reset- **Manually Call `reset`**:
- You can manually call the
method from the form instance to reset all fields. This can be done, for example, when the modal is closed.reset
- You can manually call the
- **Example Code**:
- Here is an example of how you can manually call
in aresetuseModalFormsetup:
- Here is an example of how you can manually call
import { useModalForm } from "@refinedev/mui";
import { useForm } from "react-hook-form";
import { useEffect } from "react";
const MyComponent = () => {
const { formInstance, modalProps } = useModalForm({
refineCoreProps: { action: 'create' },
defaultValues: {
title: "",
subtitle: "",
content: "",
},
modalProps: {
autoResetForm: false, // Disable auto reset if it's not working as expected
},
});
const { reset } = formInstance;
// Manually call reset when the modal is closed
useEffect(() => {
if (!modalProps.open) {
reset();
}
}, [modalProps.open, reset]);
Kreturn (
<Modal {...modalProps}>
<form onSubmit={formInstance.handleSubmit((data) => {
// Handle form submission
console.log("Form data:", data);
// Manually reset the form after submission
reset();
})}>
{/* Form fields */}
<input {...formInstance.register("title")} placeholder="Title" />
<input {...formInstance.register("subtitle")} placeholder="Subtitle" />
<textarea {...formInstance.register("content")} placeholder="Content" />
<button type="submit">Submit</button>
</form>
</Modal>
);
};
For more detailed guidance, you might want to refer to the official documentation (https://refine.dev/docs) or follow up on the relevant GitHub issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
<Modal {...modalProps}>
<form onSubmit={formInstance.handleSubmit((data) => {
// Handle form submission
console.log("Form data:", data);
// Manually reset the form after submission
reset();
})}>
{/* Form fields */}
<input {...formInstance.register("title")} placeholder="Title" />
<input {...formInstance.register("subtitle")} placeholder="Subtitle" />
<textarea {...formInstance.register("content")} placeholder="Content" />
<button type="submit">Submit</button>
</form>
</Modal>
);
};
``
3. **Additional Considerations**:
- Ensure that the initialValues are set correctly in useModalForm().formProps to avoid issues with stale data.
- If you are using useDrawerForm, similar issues and solutions apply as discussed in the **GitHub issue** (<https://github.com/refinedev/refine/issues/756>).
By manually calling the reset` method, you can ensure that all fields are reset to their default values when the modal is closed or after form submission.For more detailed guidance, you might want to refer to the official documentation (https://refine.dev/docs) or follow up on the relevant GitHub issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@422289470487003153 kapa.ai is still learning and improving, please let us know how it did by reacting below
S@kapa.ai is was working i was using calling the onFinish directly instead of the model.submit
KLet me check the knowledge base for you. One moment!
K----------------------
If calling the
import { useModalForm } from "@refinedev/mui";
import { useForm } from "react-hook-form";
import { useEffect } from "react";
const MyComponent = () => {
const { formInstance, modalProps } = useModalForm({
refineCoreProps: { action: 'create' },
defaultValues: {
title: "",
subtitle: "",
content: "",
},
modalProps: {
autoResetForm: false, // Disable auto reset if it's not working as expected
},
});
const { reset, handleSubmit } = formInstance;
// Manually call reset when the modal is closed
useEffect(() => {
if (!modalProps.open) {
reset();
}
}, [modalProps.open, reset]);
const onFinish = async (data) => {
// Handle form submission
console.log("Form data:", data);
// Manually reset the form after submission
reset();
};
If calling the
onFinish directly was working for you instead of using modal.submit, you can continue to use that approach. Here’s how you can structure your code to manually handle form submission and reset the form fields:- **Manually Handle Form Submission**:
- You can call the
onFinishfunction directly and then manually reset the form fields.
- You can call the
- **Example Code**:
- Here is an example of how you can manually handle form submission and reset the form fields:
import { useModalForm } from "@refinedev/mui";
import { useForm } from "react-hook-form";
import { useEffect } from "react";
const MyComponent = () => {
const { formInstance, modalProps } = useModalForm({
refineCoreProps: { action: 'create' },
defaultValues: {
title: "",
subtitle: "",
content: "",
},
modalProps: {
autoResetForm: false, // Disable auto reset if it's not working as expected
},
});
const { reset, handleSubmit } = formInstance;
// Manually call reset when the modal is closed
useEffect(() => {
if (!modalProps.open) {
reset();
}
}, [modalProps.open, reset]);
const onFinish = async (data) => {
// Handle form submission
console.log("Form data:", data);
// Manually reset the form after submission
reset();
};
Kreturn (
<Modal {...modalProps}>
<form onSubmit={handleSubmit(onFinish)}>
{/* Form fields */}
<input {...formInstance.register("title")} placeholder="Title" />
<input {...formInstance.register("subtitle")} placeholder="Subtitle" />
<textarea {...formInstance.register("content")} placeholder="Content" />
<button type="submit">Submit</button>
</form>
</Modal>
);
};
For more detailed guidance, you might want to refer to the official documentation (https://refine.dev/docs) or follow up on the relevant GitHub issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
<Modal {...modalProps}>
<form onSubmit={handleSubmit(onFinish)}>
{/* Form fields */}
<input {...formInstance.register("title")} placeholder="Title" />
<input {...formInstance.register("subtitle")} placeholder="Subtitle" />
<textarea {...formInstance.register("content")} placeholder="Content" />
<button type="submit">Submit</button>
</form>
</Modal>
);
};
``
3. **Additional Considerations**:
- Ensure that the initialValues are set correctly in useModalForm().formProps to avoid issues with stale data.
- If you are using useDrawerForm, similar issues and solutions apply as discussed in the **GitHub issue** (<https://github.com/refinedev/refine/issues/756>).
By manually handling the form submission and calling the reset` method, you can ensure that all fields are reset to their default values when the modal is closed or after form submission.For more detailed guidance, you might want to refer to the official documentation (https://refine.dev/docs) or follow up on the relevant GitHub issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------