Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Validation errors keep appearing from data grid component which is hidden by condition #6013

Open
dheepak-aot opened this issue Feb 13, 2025 · 2 comments
Assignees

Comments

@dheepak-aot
Copy link

dheepak-aot commented Feb 13, 2025

Describe the bug
When a form is submitted with one or more validation errors in a data grid component, the validation errors appear on the banner at the top of the page which is an expected behaviour.
But if we update form input(s) which makes the data grid to be hidden, still the validation errors from the data grid stay on the banner which displays the errors.

Note : When the data -grid component is hidden, even with errors displayed in banner the submit action still works as expected. So there is no impact in the functioning, but the UI looks faulty.

Version/Branch
Formio SDK Version: "@formio/js": "^5.0.0"

To Reproduce
Steps to reproduce the behavior:

  1. Create a form which is has a data grid (not Edit Grid) component and the data grid component is displayed based on a condition driven by another input. (There is a form definition attached to this ticket, that can be used directly to reproduce the issue)

Form Output:

Image

  1. Provide the input to show the data grid component.

Image

  1. Submit the form and expect the errors to be displayed in the components and also on the top bannner.

Image

  1. Change the form input to hide the data grid.

Image

  1. You can see that the validation errors still persist on the top banner instead of dissapearing.

Image

Expected behavior

When the data-grid component is hidden, no validation error is w.r.t the component expected to be displayed.

Image

Formio SDK version previous used by us did not result in this error.

Formio SDK version previous used: "formiojs": "^4.21.4"

Additional context
Add any other context about the problem here.

Sample Form Definition to reproduce the error

{
    "_id": "67ae7c51b294f24f3aa7c5bf",
    "title": "Test Data Grid",
    "name": "testdatagridshowerror",
    "path": "testdatagridshowerror",
    "type": "form",
    "display": "form",
    "tags": [
        "common"
    ],
    "submissionAccess": [
        {
            "type": "create_own",
            "roles": [
                "66edff2fda1c6498ab7a8a18"
            ]
        },
        {
            "type": "read_own",
            "roles": [
                "66edff2fda1c6498ab7a8a18"
            ]
        },
        {
            "type": "update_own",
            "roles": [
                "66edff2fda1c6498ab7a8a18"
            ]
        },
        {
            "type": "delete_own",
            "roles": [
                "66edff2fda1c6498ab7a8a18"
            ]
        }
    ],
    "owner": "66edff2fda1c6498ab7a8a5a",
    "components": [
        {
            "clearOnHide": false,
            "key": "panel",
            "input": false,
            "title": "Test grid grid panel",
            "theme": "default",
            "tableView": false,
            "components": [
                {
                    "autofocus": false,
                    "input": true,
                    "tableView": true,
                    "inputType": "radio",
                    "label": "Show the data grid component",
                    "key": "panelShowthedatagridcomponentItems",
                    "values": [
                        {
                            "value": "yes",
                            "label": "Yes",
                            "shortcut": ""
                        },
                        {
                            "value": "no",
                            "label": "No",
                            "shortcut": ""
                        }
                    ],
                    "defaultValue": "",
                    "protected": false,
                    "fieldSet": false,
                    "persistent": true,
                    "hidden": false,
                    "clearOnHide": true,
                    "validate": {
                        "required": false,
                        "custom": "",
                        "customPrivate": false
                    },
                    "type": "radio",
                    "labelPosition": "top",
                    "optionsLabelPosition": "right",
                    "tags": [],
                    "conditional": {
                        "show": "",
                        "when": null,
                        "eq": ""
                    },
                    "properties": {}
                },
                {
                    "autofocus": false,
                    "input": true,
                    "tree": true,
                    "components": [
                        {
                            "autofocus": false,
                            "input": true,
                            "tableView": true,
                            "inputType": "text",
                            "inputMask": "",
                            "label": "Grid Item name",
                            "key": "panelDataGridItemname",
                            "placeholder": "",
                            "prefix": "",
                            "suffix": "",
                            "multiple": false,
                            "defaultValue": "",
                            "protected": false,
                            "unique": false,
                            "persistent": true,
                            "hidden": false,
                            "clearOnHide": true,
                            "spellcheck": true,
                            "validate": {
                                "required": true,
                                "minLength": "",
                                "maxLength": "",
                                "pattern": "",
                                "custom": "",
                                "customPrivate": false
                            },
                            "conditional": {
                                "show": "",
                                "when": null,
                                "eq": ""
                            },
                            "type": "textfield",
                            "inDataGrid": true,
                            "labelPosition": "top",
                            "inputFormat": "plain",
                            "tags": [],
                            "properties": {}
                        }
                    ],
                    "tableView": true,
                    "label": "Data Grid",
                    "key": "panelDataGrid",
                    "protected": false,
                    "persistent": true,
                    "hidden": false,
                    "clearOnHide": true,
                    "type": "datagrid",
                    "addAnotherPosition": "bottom",
                    "tags": [],
                    "conditional": {
                        "show": "true",
                        "when": "panelShowthedatagridcomponentItems",
                        "eq": "yes"
                    },
                    "properties": {},
                    "addAnother": "Add Item"
                }
            ],
            "type": "panel",
            "breadcrumb": "default",
            "hideLabel": false,
            "tags": [],
            "conditional": {
                "show": "",
                "when": null,
                "eq": ""
            },
            "properties": {}
        },
        {
            "autofocus": false,
            "input": true,
            "label": "Submit",
            "tableView": false,
            "key": "submit",
            "size": "md",
            "leftIcon": "",
            "rightIcon": "",
            "block": false,
            "action": "submit",
            "disableOnInvalid": false,
            "theme": "primary",
            "type": "button"
        }
    ],
    "pdfComponents": [],
    "access": [
        {
            "type": "read_all",
            "roles": [
                "66edff2fda1c6498ab7a8a14",
                "66edff2fda1c6498ab7a8a18",
                "66edff2fda1c6498ab7a8a1c"
            ]
        }
    ],
    "created": "2025-02-13T23:12:17.234Z",
    "modified": "2025-02-13T23:16:23.075Z",
    "machineName": "testdatagridshowerror"
}
@ninosamson
Copy link

Thanks for submitting this. Would love to see this get fixed as well as it is causing some confusion in my application.

@Sidiro23
Copy link

Thank you for reporting this issue. I can reproduce it and have logged a ticket for the backlog. We are always willing to review any contributions from the open-source community to resolve this issue.

For internal reference: FIO-9780

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants