model form autoResetForm

model form autoResetForm does not seem to reset all feilds

13 Replies

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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: 1. Default Behavior: - The autoResetForm property is designed to reset the form after a successful submit and is true by default. - For Ant Design:

     const modalForm = useModalForm({  
       autoResetForm: false,  
     });

     const modalForm = useModalForm({  
       autoResetForm: false,  
     });

Source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#autoresetform) - For Mantine:

     const modalForm = useModalForm({  
       modalProps: {  
         autoResetForm: false,  
       },  
     });

     const modalForm = useModalForm({  
       modalProps: {  
         autoResetForm: false,  
       },  
     });

Source (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form/#autoresetform) 2. Known Issues: - There are known issues where autoResetForm does not work correctly in some scenarios. For example, when changing the title to trigger .resetFields() inside the autoResetForm condition, 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 in useFormModal of the antd package. 3. 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:

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

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

Source (https://github.com/refinedev/refine/issues/5954) 4. 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). If 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 :speech_balloon: ----------------------

kapa.ai•2w ago

<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below

exotic-emerald•2w ago

@kapa.ai i am using mui

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- 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: 1. Default Behavior: - The autoResetForm property is designed to reset the form after a successful submit and is true by default. - For MUI, you can configure it as follows:

     const modalForm = useModalForm({
       modalProps: {
         autoResetForm: false,
       },
     });

     const modalForm = useModalForm({
       modalProps: {
         autoResetForm: false,
       },
     });

Source (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form/#autoresetform) 2. Known Issues: - There are known issues where autoResetForm does not work correctly in some scenarios. For example, when changing the title to trigger .resetFields() inside the autoResetForm condition, 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 in useFormModal of the antd package. Although this is specific to Ant Design, similar issues might occur with MUI. 3. 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:

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

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

kapa.ai•2w ago

<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below

exotic-emerald•2w ago

@kapa.ai so if i dont have inital values it wont reset

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- 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: 1. Default Behavior: - The autoResetForm property is designed to reset the form after a successful submit and is true by default. - For MUI, you can configure it as follows:

     const modalForm = useModalForm({
       modalProps: {
         autoResetForm: false,
       },
     });

     const modalForm = useModalForm({
       modalProps: {
         autoResetForm: false,
       },
     });

Source (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form/#autoresetform) 2. 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. 3. 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:

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

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

kapa.ai•2w ago

<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below

exotic-emerald•2w ago

@kapa.ai still seems to not rest all fields is there a way to manually call reset

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If the autoResetForm property is not resetting all fields as expected, you can manually call the reset method to ensure all fields are reset. Here is how you can do it: 1. Manually Call reset: - You can manually call the reset method from the form instance to reset all fields. This can be done, for example, when the modal is closed. 2. Example Code: - Here is an example of how you can manually call reset in a useModalForm setup:

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]);
return (
        <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>
    );
};

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]);
return (
        <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 :speech_balloon: ----------------------

kapa.ai•2w ago

<@422289470487003153> kapa.ai is still learning and improving, please let us know how it did by reacting below

exotic-emerald•2w ago

@kapa.ai is was working i was using calling the onFinish directly instead of the model.submit

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- 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: 1. Manually Handle Form Submission: - You can call the onFinish function directly and then manually reset the form fields. 2. 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();
    };
return (
        <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>
    );
};

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();
    };
return (
        <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 :speech_balloon: ----------------------