[BUG] Form's onChange not called after form's field validation rule updated from required to non-required

Posted 1 month ago

[BUG] Form's onChange not called after form's field validation rule updated from required to non-required #411


Please provide as many details as you can:

  • Hosting type
    • Local deployment
      • Version: N/A, issue only with @formio/react
  • Formio.js version: 4.13.7
  • @formio/react version: 5.1.1
  • Frontend framework: React
  • Browser: Google Chrome
  • Browser version: Version 94.0.4606.71 (Official Build) (64-bit)

Steps to Reproduce

I prepared a simple app reproducing the problem:


Unzip the app and launch it by executing npm install first and then npm start inside the app folder.

The app simply renders a Form with some form definition object provided with form property and logs the fact that onChange was called in the console:

const onFormChange = (submission) => {
    console.log("onFormChange called");
<Form form={formObject} onChange={onFormChange} />

Initially, the multi-choice component is set as required in the form definition's validation section (formWithRequired object):


When the app opens in the browser, open Developer Console.

When checking and unchecking the checkboxes, you can see in the console that onChange is called properly after each change:


Now, click the "Set not required" button:


It basically calls the function which sets new form. The only difference is that in this new form's definition (formWithoutRequired object) the required is set to false:


After clicking this button, you can see in the console that the onChange event is not called anymore.

Expected behavior

The onChange event should always be called. Even if the state of the form has been changed with different validation rules.

Observed behavior

The onChange event is not called as soon as the form property of Form component is changed to another one with non-required validation rules.

Additional info

What is even stranger, is that when you click "Set required" button again, the onChange will be called properly again. Additionally, it works correctly with @formio/react 5.0.0.

I think it may be related to these changes: https://github.com/formio/react/commit/7b67970fd7e56e96d0f23dd699d263943ab6488f But I'm not sure about that.