anyOf form validation error messages confusing when anyOf items contain properties found in other items

[jroebu14]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.18.2

Current Behavior

I am seeing confusing error messages when interacting with a form that uses anyOf where properties in an anyOf item are also found in other anyOf items.

In this schema for example:

{
  type: "object",
  properties: {
    favouriteThings: {
      anyOf: [
        {
          type: "object",
          properties: {
            favouriteAnimal: {
              type: "string",
            },
            favouriteColour: {
              type: "string",
            },
          },
          required: ["favouriteAnimal"],
        },
        {
          type: "object",
          properties: {
            favouriteAnimal: {
              type: "string",
            },
            favouriteColour: {
              type: "string",
            },
            favouritePerson: {
              type: "string",
            },
          },
          required: ["favouriteAnimal", "favouriteColour"],
        },
        {
          type: "object",
          properties: {
            favouritePerson: {
              type: "string",
            },
          },
          required: ["favouritePerson"],
        },
      ],
    },
  },
};

because favouriteAnimal is a property of all three anyOf items and required in 2 of them, when I chose Option 1 and submit the form without providing a value for favouriteAnimal then I will see two must have required property 'favouriteAnimal' error messages.

You can also see that favouriteColor is showing a required error message even though it is optional for Option 1. This is because it is required in Option 2.

You can also see that favouritePerson is showing a required error message even though it is not a property of Option 1. This is because it is required in Option 3.

Expected Behavior

The form should only show error messages relevant to the current anyOf option selected.

Steps To Reproduce

1. Go to https://zyh4f3.csb.app/
2. Make sure "Option 1" is selected
3. Dirty the form by entering a value in favouriteAnimal and then deleting it.
4. Submit the form
5. Observe multiple error messages for favouriteAnimal and an incorrect error message for favouriteColour

Environment

- OS: macOS 14.4.1
- Node: 20.11.0
- npm: 10.2.4

Anything else?

No response

[nickgros]

Seems similar to #1295 / #3795

[nickgros]

Here's a playground example.

[heath-freenome]

@jroebu14 This issue is also nearly identical to #3466, except we are dealing with a anyOf here rather than a oneOf. Essentially, AJV validator is validating all options. I've worked around this in my own implementations by providing a transformErrors function to filter the duplicates. Not ideal, but a quick and dirty solution. I'm not sure how rjsf can make this better given that AJV is the culprit for the duplicates.

It may be that we can add a configuration option for our validator-ajv8 to filter duplicates related to anyOf/oneOf automatically. Is this something you'd be willing to build?

[jroebu14]

@heath-freenome ah ok this makes sense. Thanks for mentioning how to work around it.

It may be that we can add a configuration option for our validator-ajv8 to filter duplicates related to anyOf/oneOf automatically. Is this something you'd be willing to build?

If you think it's a worthwhile addition then I could certainly look into that.