react-jsonschema-form
react-jsonschema-form copied to clipboard
`anyOf` form validation error messages confusing when `anyOf` items contain properties found in other items
Prerequisites
- [X] I have searched the existing issues
- [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
- [X] I have read the documentation
- [X] 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
- Go to https://zyh4f3.csb.app/
- Make sure "Option 1" is selected
- Dirty the form by entering a value in favouriteAnimal and then deleting it.
- Submit the form
- 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
Seems similar to #1295 / #3795
@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 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 Most definitely!