Using a Form.Item Clears other Form.items

Utterly confused as to what's happening. I have the given form:

<Form {...formProps} layout="vertical" onFinish={handleFinish}>
                <Form.Item
                    label="Product"
                    name={"productID"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select options={selectProductOptions}/>
                </Form.Item>
                <Form.Item
                    label="Quantity"
                    name={["quantity"]}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
            </Form>

<Form {...formProps} layout="vertical" onFinish={handleFinish}>
                <Form.Item
                    label="Product"
                    name={"productID"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select options={selectProductOptions}/>
                </Form.Item>
                <Form.Item
                    label="Quantity"
                    name={["quantity"]}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
            </Form>

Where formProps is coming from:

const {
        modalProps,
        formProps,
        show,
    } = useModalForm({
        action: "create",
        resource: "products",
        redirect: false
    })

const {
        modalProps,
        formProps,
        show,
    } = useModalForm({
        action: "create",
        resource: "products",
        redirect: false
    })

Selecting something from the products dropdown will clear the quantity input, while typing something in the quantity input will clear the products dropdown. It was working fine before, so I'm confused as to why it's decided to stop. Any pointers to possible reasons this could be happening would be really appreciated

3 Replies

kapa.ai•12mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided, it seems like there might be an issue with the state management of your form. The useModalForm hook you're using is responsible for managing the form state, and it seems like the state is being reset when you interact with either the product dropdown or the quantity input. It's hard to pinpoint the exact issue without more context, but here are a few things you could check: 1. Make sure the useModalForm hook is being used correctly. You can refer to the refine documentation (https://refine.dev/docs) for more information on how to use this hook. 2. Check if there are any side effects in your handleFinish function that could be causing the form state to reset. 3. Ensure that the name props in your Form.Item components are unique and correctly set. The name prop is used to control the state of the form fields, so any issues here could cause unexpected behavior. If none of these suggestions help, I would recommend reaching out to the refine community or checking the refine blog (https://refine.dev/blog) for more resources and examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

conventional-tan•12mo ago

Ahh. I had a quantity field in a different Modal Form that also existed on this page. Guess it didnt like that. Ok -- it was specifically because I had another editableTable accessing the same resource.

const {
        tableProps,
        isEditing,
        setId: setEditId,
    } = useEditableTable({
        resource: "products",
    })

const {
        tableProps,
        isEditing,
        setId: setEditId,
    } = useEditableTable({
        resource: "products",
    })