formio / formio.js

JavaScript powered Forms with JSON Form Builder

Home Page:https://formio.github.io/formio.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Environment:

Steps to Reproduce

  1. Add a text field component and set validation as require for the component.
  2. Add a console.log statement inside custom default value function.
  3. Add another component say text area.
  4. check the console tab in the browser by leaving the text area component filed as empty and type anything inside the another added component.
  5. You may see the custom default value function called each time.
  6. 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

  1. 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.
  2. 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.
  3. If a custom validation is added, the same happens, regardless of if it's required or not.
  4. If the validation is a length validation, default custom value is executed only when the field itself is modified.

Attaching GIF

CustomDefaultValue-Defect

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
    }
  ]
}

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.