Select

[narangradhika24]

We are facing these two issue with data driven forms. Can you please check if we are missing anything here and how can we resolve these :

1. We are using select component with loadOptions and once we have selected the values and submitted the form, if we reload the page the values are not getting initialized in select component.

2. Once we have selected the value from the select component options (field1) , if we select/input some value for other field (field2) which we are validating (using validate prop of FormRenderer) the field1 value is re-rendered as blank value even though the value is there ( returned by getState().values). If we now click on select component (field1) again, the selected value starts to render.
   Can you please help here as to how can we resolve this issue with field1 value getting empty on select/input for field2?

This is the schema we are using :

{
    "fields": [
        {
            "name": "listener",
            "component": "field-listener",
            "hideField": true
        },
        {
            "name": "select1",
            "label": "Select1",
            "actions": {
                "options": [
                    "serviceToLoadSelect1Options"
                ]
            },
            "component": "select",
            "condition": {
                "else": {
                    "visible": false
                },
                "then": {
                    "visible": true
                },
                "when": "field1",
                "pattern": "(.*;abc\b)|(^abc;.*)|(.+;abc;.+)|(abc)"
            },
            "isSearchable": true
        },
        {
            "name": "select2",
            "label": "Select2",
            "actions": {
                "options": [
                    "serviceToLoadSelect2Options"
                ]
            },
            "component": "select",
            "noValueUpdates":true,
            "isSearchable": true
        },      
        {
              "component": "sub-form",
              "title": "Sub Form",
              "description": "",
              "name": "subForm1",
              "fields": [
                {
                "name": "subForm1Field1",
                "label": "SubForm1Field1",
                "actions": {
                    "loadOptions": [
                        "serviceForSubForm1Field1LoadOptions"
                    ]
                },
                "component": "select",
                "options": [],
                "noValueUpdates":true,
                "condition": {
                    "is": true,
                    "else": {
                        "visible": true
                    },
                    "then": {
                        "set": {
                            "spn": null
                        },
                        "visible": false
                    },
                    "when": "subForm1Field2"
                },
                "isSearchable": true,
                
                "validate": []
                },
                {
                    "name": "subForm1Field2",
                    "label": "SubForm1Field2",
                    "component": "checkbox"
                },
                {
                    "name": "subForm1Field3",
                    "label": "SubForm1Field3",
                    "actions": {
                        "resolveProps": [
                            "resolvePropsForSubForm1Field2"
                        ]
                    },
                    "component": "text-field"
                }
            ]
        },
        {
            "name": "field1",
            "label": "field1",
            "options": null,
            "component": "text-field",
            "condition": [],
            "hideField": true
        },
        {
            "name": "field2",
            "label": "Field2",
            "actions": {
                "options": [
                    "serviceToLoadField2Options"
                ]
            },
            "component": "select",
            "options": [],
            "noValueUpdates":true,
            "isSearchable": true
        },
        {
            "name": "field3",
            "type": "number",
            "label": "field3",
            "validate": [
                {
                    "type": "min-number-value",
                    "value": 0,
                    "includeThreshold": false
                }
            ],
            "component": "text-field",
            "helperText": "field3"
        },
        {
            "name": "field4",
            "type": "number",
            "label": "Field4",
            "validate": [
                {
                    "type": "min-number-value",
                    "value": 0,
                    "includeThreshold": false
                }
            ],
            "component": "text-field",
            "helperText": "field4"
        }
       
    ]
}

Following are the FormRenderer and validate snippets :

<FormRenderer
                    validate={validate}
                    componentMapper={componentMapper}
                    FormTemplate={FormTemplateCanReset}
                    schema={schema}
                    initialValues={requestValues}
                    onSubmit={(values) => {
                        submitForm(values,formId)
                    }}
                    onCancel={() => console.log("Cancel action")}
                    actionMapper={actionMapper}
                />

 export const validate = (values: any) => {
                    const errors: any = {};
                
                    if (!values.field3 && !values.field4) {
                      errors.field3 = "msg 1";
                
                      errors.field4 = "msg l";
                    }
                
                    if(!values.subForm1Field1 && !values.subForm1Field3)
                    {
                        errors.subForm1Field1='msg 2';
                        errors.subForm1Field3='msg 2'
                    }
                    
                    return errors;
                };

[Hyperkid123]

@narangradhika24 Hi there. What component do you use?

Usually when cross field values/validations are not updated is because the proper subscription is not set up. You can read more about them here: https://data-driven-forms.org/components/renderer#heading-subscription#subscription

Try adding this prop to the renderer

subscription = {{ values: true }}

EDIT:

We are using select component with loadOptions and once we have selected the values and submitted the form, if we reload the page the values are not getting initialized in select component.

What do you mean when you say reload the page? Is it a hard browser refresh? Or do you leave the page and return back?

The load options in our mappers are cached to prevent unnecessary async calls. But they will always trigger on the first form mount. So to me, it seems as if the form was not properly unmounted but only hidden. Can that be the case?

[Hyperkid123]

Ah, I see. In that case, it is better for you to call the initialize method. The submit callback receives a second argument with the formAPI object. https://data-driven-forms.org/components/renderer#heading-onsubmit#onsubmit

That way you don't have to reset your initial values object but the for will be re-initialized.

[koti5104]

@Hyperkid123 I am again sorry for missing out one more detail. We submit the form now, later we would open a new page with details we have submitted in the initialValues. This is all together a new page that's rendering the form with the values which were submitted earlier

[Hyperkid123]

OK, I think I got it now. I am going to poke around with this scenario tomorrow and see what can be done. Could you tell me what component mapper you use?

[koti5104]

we are using mui-component-mapper. with default form renderer.

[Hyperkid123]

@koti5104 @narangradhika24
So I have an explanation of why is this hapenning. I have created a code sandbox that we can use as an example: https://codesandbox.io/s/modest-hamilton-v0qstc?file=/src/App.js

The reason why I think the option loading in the submitted form is not working is the fact that the option simply does not exist and the select can't render the value.

If you go to the codesandbox and select option "three" and submit the form, a new form will be rendered and after a short delay, the value will appear in the select.

Now if you refresh the sandbox and type the letter "e" to load additional options, wait a bit, select option "eight" and submit. Now if the new form will not show the value eight.

Why is that? Very simple, the load options, with no filter string, will only return first three options. Therefore the select component, even though It has the value 8 in the state, it cannot find the option with the value 8 thus, the label is empty.

[Hyperkid123]

The issue was with the schema and how the async validators were defined. The conversation was resolved on discord. No 🐛 was found.