formio
[BUG] Validation errors keep appearing from data grid component which is hidden by condition
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:
- 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:
- Provide the input to show the data grid component.
- Submit the form and expect the errors to be displayed in the components and also on the top bannner.
- Change the form input to hide the data grid.
- You can see that the validation errors still persist on the top banner instead of dissapearing.
Expected behavior
When the data-grid component is hidden, no validation error is w.r.t the component expected to be displayed.
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"
}
Thanks for submitting this. Would love to see this get fixed as well as it is causing some confusion in my application.
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
