Bug: Validation regression Form not revalidating after formData change (#4343)

CHANGELOG.md

@@ -16,6 +16,18 @@ should change the heading of the (upcoming) version to include a major version b
 
 -->
 
+# 5.22.2
+
+## @rjsf/core
+
+- Fixed validation regression Form not revalidating after formData change, fixing [#4343](https://github.com/rjsf-team/react-jsonschema-form/issues/4343)
+
+# 5.22.1
+
+## Dev / docs / playground
+
+- Bumped peer dependencies to 5.22.x due to updated type definition and API changes in @rjsf/utils
+
 # 5.22.0
 
 ## @rjsf/core

packages/core/src/components/Form.tsx

@@ -441,9 +441,9 @@ export default class Form<
     if (mustValidate) {
       const schemaValidation = this.validate(formData, schema, schemaUtils, _retrievedSchema);
       errors = schemaValidation.errors;
-      // If the schema has changed, we do not merge state.errorSchema.
+      // If retrievedSchema is undefined which means the schema or formData has changed, we do not merge state.
       // Else in the case where it hasn't changed, we merge 'state.errorSchema' with 'schemaValidation.errorSchema.' This done to display the raised field error.
-      if (isSchemaChanged) {
+      if (retrievedSchema === undefined) {
         errorSchema = schemaValidation.errorSchema;
       } else {
         errorSchema = mergeObjects(

packages/core/test/ArrayField.test.jsx

@@ -3219,6 +3219,27 @@ describe('ArrayField', () => {
       });
     });
 
+    it('Check that when formData changes, the form should re-validate', () => {
+      const { node, rerender } = createFormComponent({
+        schema,
+        formData: [
+          {
+            text: null,
+          },
+        ],
+        liveValidate: true,
+      });
+
+      const errorMessages = node.querySelectorAll('#root_0_text__error');
+      expect(errorMessages).to.have.length(1);
+      const errorMessageContent = node.querySelector('#root_0_text__error .text-danger').textContent;
+      expect(errorMessageContent).to.contain('must be string');
+
+      rerender({ schema, formData: [{ text: 'test' }], liveValidate: true });
+
+      expect(node.querySelectorAll('#root_0_text__error')).to.have.length(0);
+    });
+
     it('raise an error and check if the error is displayed', () => {
       const { node } = createFormComponent({
         schema,

packages/core/test/ObjectField.test.jsx

@@ -227,6 +227,25 @@ describe('ObjectField', () => {
       });
     });
 
+    it('Check that when formData changes, the form should re-validate', () => {
+      const { node, rerender } = createFormComponent({
+        schema,
+        formData: {
+          foo: null,
+        },
+        liveValidate: true,
+      });
+
+      const errorMessages = node.querySelectorAll('#root_foo__error');
+      expect(errorMessages).to.have.length(1);
+      const errorMessageContent = node.querySelector('#root_foo__error .text-danger').textContent;
+      expect(errorMessageContent).to.contain('must be string');
+
+      rerender({ schema, formData: { foo: 'test' }, liveValidate: true });
+
+      expect(node.querySelectorAll('#root_foo__error')).to.have.length(0);
+    });
+
     it('raise an error and check if the error is displayed', () => {
       const { node } = createFormComponent({
         schema,

packages/core/test/StringField.test.jsx

@@ -299,6 +299,23 @@ describe('StringField', () => {
       expect(node.querySelector('input').getAttribute('autocomplete')).eql('family-name');
     });
 
+    it('Check that when formData changes, the form should re-validate', () => {
+      const { node, rerender } = createFormComponent({
+        schema: { type: 'string' },
+        formData: null,
+        liveValidate: true,
+      });
+
+      const errorMessages = node.querySelectorAll('#root__error');
+      expect(errorMessages).to.have.length(1);
+      const errorMessageContent = node.querySelector('#root__error .text-danger').textContent;
+      expect(errorMessageContent).to.contain('must be string');
+
+      rerender({ schema: { type: 'string' }, formData: 'hello', liveValidate: true });
+
+      expect(node.querySelectorAll('#root__error')).to.have.length(0);
+    });
+
     it('raise an error and check if the error is displayed', () => {
       const { node } = createFormComponent({
         schema: { type: 'string' },

packages/core/test/test_utils.js

@@ -14,10 +14,13 @@ export function createComponent(Component, props) {
   const onError = sinon.spy();
   const onSubmit = sinon.spy();
   const comp = <Component onSubmit={onSubmit} onError={onError} onChange={onChange} {...props} />;
-  const { container } = render(comp);
+  const { container, rerender } = render(comp);
+
+  const rerenderFunction = (props) =>
+    rerender(<Component onSubmit={onSubmit} onError={onError} onChange={onChange} {...props} />);
   const node = findDOMNode(container).firstElementChild;
 
-  return { comp, node, onChange, onError, onSubmit };
+  return { comp, node, onChange, onError, onSubmit, rerender: rerenderFunction };
 }
 
 export function createFormComponent(props) {