fix: Fixes 1295 Duplicate Error Messages for Anyof/Oneof (#3795)

* Fixes 1295 Duplicate Error Messages for Anyof/Oneof * update changelog * add test for error
rjsf-team · Aug 1, 2023 · 724e77c · 724e77c
1 parent 0ebc82e
commit 724e77c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,10 @@ should change the heading of the (upcoming) version to include a major version b
 -->
 # 5.11.1
 
+## @rjsf/core
+
+- Updated `SchemaField` to ignore errors for `anyOf`/`oneOf` parent schema, fixing [1295](https://github.com/rjsf-team/react-jsonschema-form/issues/1295)
+
 ## @rjsf/utils
 
 - Created new `resolveAllReferences()` function to resolve all references within a schema's properties and array items.

diff --git a/packages/core/src/components/fields/SchemaField.tsx b/packages/core/src/components/fields/SchemaField.tsx
@@ -229,16 +229,20 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
       registry={registry}
     />
   );
-  const errorsComponent = hideError ? undefined : (
-    <FieldErrorTemplate
-      errors={__errors}
-      errorSchema={errorSchema}
-      idSchema={idSchema}
-      schema={schema}
-      uiSchema={uiSchema}
-      registry={registry}
-    />
-  );
+  /*
+   * AnyOf/OneOf errors handled by child schema
+   */
+  const errorsComponent =
+    hideError || schema.anyOf || schema.oneOf ? undefined : (
+      <FieldErrorTemplate
+        errors={__errors}
+        errorSchema={errorSchema}
+        idSchema={idSchema}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+    );
   const fieldProps: Omit<FieldTemplateProps<T, S, F>, 'children'> = {
     description: (
       <DescriptionFieldTemplate

diff --git a/packages/core/test/SchemaField.test.jsx b/packages/core/test/SchemaField.test.jsx
@@ -475,6 +475,37 @@ describe('SchemaField', () => {
       expect(matches[0].textContent).to.contain('test');
     });
 
+    it('should ignore errors for top level anyOf/oneOf and show only one in child schema', () => {
+      const testSchema = {
+        type: 'object',
+        properties: {
+          foo: {
+            anyOf: [
+              {
+                type: 'boolean',
+              },
+              {
+                type: 'array',
+                items: {
+                  type: 'string',
+                },
+              },
+            ],
+          },
+        },
+      };
+      const { node } = createFormComponent({
+        schema: testSchema,
+        uiSchema,
+        customValidate,
+      });
+      Simulate.submit(node);
+
+      const matches = node.querySelectorAll('form .form-group .form-group .text-danger');
+      expect(matches).to.have.length.of(1);
+      expect(matches[0].textContent).to.contain('test');
+    });
+
     it('should pass errors to custom FieldErrorTemplate', () => {
       const customFieldError = (props) => {
         return <div className='custom-field-error'>{props.errors}</div>;