Every validation triggers the CUSTOM DEFAULT VALUE function to be executed on every change of every field in the form
nishit4777 opened this issue · comments
Nishit M commented
Environment:
- Hosting type : Form.io
- Version: Latest version (https://formio.github.io/formio.js/app/builder.html)
- Browser: Microsoft Edge
- Browser version: Version 114.0.1823.82 (Official build) (64-bit)
Steps to Reproduce
- Add a text field component and set validation as require for the component.
- Add a console.log statement inside custom default value function.
- Add another component say text area.
- check the console tab in the browser by leaving the text area component filed as empty and type anything inside the another added component.
- You may see the custom default value function called each time.
- This may cause lot of performance issues as each time the custom default value function is being called.
Expected behavior
Custom default value should be executed only once, when the field itself is modified and not further. It should be same as what we do for length validation.
Observed behavior
- When you add ANY kind of validation (e.g. required) to a field, its CUSTOM DEFAULT VALUE function will be called for every change of every field on the form. This is a worst-case scenario with regards to performance.
- The attached form Json has one field that is set to "required". To see the impact that this problem has, leave the first field empty and type on any of the other fields. For each character typed in, the custom default value of the field is triggered. We can check the console log statements added in the browser.
- If a custom validation is added, the same happens, regardless of if it's required or not.
- If the validation is a length validation, default custom value is executed only when the field itself is modified.
Attaching GIF
Form Json
"display": "form",
"components": [
{
"label": "Text Field",
"applyMaskOn": "change",
"tableView": true,
"customDefaultValue": "console.log(\"Default value inside text field\")",
"validate": {
"required": true
},
"key": "textField",
"type": "textfield",
"input": true
},
{
"label": "Text Area",
"applyMaskOn": "change",
"autoExpand": false,
"tableView": true,
"key": "textArea",
"type": "textarea",
"input": true
},
{
"type": "button",
"label": "Submit",
"key": "submit",
"disableOnInvalid": true,
"input": true,
"tableView": false
}
]
}
Travis Tidwell commented
I am curious if this will still be an issue with the 5.x renderer. We are overhauling the validation system with this release to be more efficient and use our @formio/core library for validations. Once that PR has been pulled in, I would like to retest this ticket to see if it is in fact resolved.