react-jsonschema-form anyOf interacts badly with validation

Prerequisites

[x] I have read the documentation;
[x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
[ ] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

Schema validation interacts badly with anyOf. If an anyOf property defines a validation attribute, e.g. pattern, then:

if that property is not option 0, entering invalid input will cause the form to auto-select option 0
validation errors appear only when all options are invalid

This is related to but not exactly #1176.

Steps to Reproduce

The SSCCE is available at https://github.com/legalese/react-jsonschema-form/tree/anyOfValidation

That patch adds a few patterns for validation to playground/samples/anyOf.js.

enter "2" for the age. You should see a validation error right away. That error will go away if you make the age "21", because the pattern is matching on "1". So validation works in the simplest case.
under First Method of Identification, in First name, enter "a". This should produce a validation error, because the firstName property has a pattern looking for "s". But the validation warning doesn't appear!
select Second Method of Identification. Enter "a". This should produce a validation error, because the idCode is looking for an "s". Instead of getting a validation error, though, the form automatically switches back to the First Method of Identification! This is due to the logic at https://github.com/mozilla-services/react-jsonschema-form/blob/master/src/components/fields/MultiSchemaField.js#L76 falling through to line 85.
Now that we're back to the First Method of Identification, enter "aa" for the First Name. This time, validation errors pop up in red:

.firstName should match pattern "s"
.idCode should match pattern "s"
should match some schema in anyOf

Over-excited by the above errors, the "Age" widget turns red. But it shouldn't, because it has value "21", and should be passing validation.

Expected behavior

Invalid input under an anyOf should not cause refreshing to Option 0.

Instead, relevant validation errors should show right away.

Actual behavior

Invalid input under an anyOf (> 0) resets the component to select Option 0.

Relevant validation errors do not display until all the alternatives of the anyOf are invalid.

Version

1.3.0.

Mar 28 '19 12:03 jobchong

Thanks for reporting. Link to playground example

Mar 31 '19 21:03 epicfaace

Hi, I have the same issue here

Can you please have a look if the problem is related to the form or is it me doing something wrong? Is not even validating the Code outside the anyOf.

Thanks!

Feb 05 '21 10:02 micheleo

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.