react-jsonschema-form icon indicating copy to clipboard operation
react-jsonschema-form copied to clipboard

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

Open jroebu14 opened this issue 10 months ago • 5 comments

Prerequisites

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.

Screenshot 2024-04-19 at 07 54 56

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

jroebu14 avatar Apr 19 '24 07:04 jroebu14

Seems similar to #1295 / #3795

nickgros avatar Apr 19 '24 19:04 nickgros

@jroebu14 This issue is also nearly identical to https://github.com/rjsf-team/react-jsonschema-form/issues/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?

heath-freenome avatar Apr 19 '24 19:04 heath-freenome

@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.

jroebu14 avatar Apr 24 '24 07:04 jroebu14

@jroebu14 Most definitely!

heath-freenome avatar Jul 05 '24 19:07 heath-freenome