Validation behavior with dependent fields

[BlackBerryID]

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

Current Behavior

onSubmit: validate all fields
onChange: dependent fields aren't validated (as a result these fields loose error state)

Expected Behavior

onChange doesn't make dependent fields with errors loose thier error state if they haven't been changed

Steps To Reproduce

1. Open example: https://playcode.io/2018348
2. Choose yes in "showSecondBlock" field
3. Click on submit button (secondBlock's fileds got errors)
4. Go to "name" field of firstBlock object
5. Type some text (secondBlock's fields loose thier errors)

Environment

No response

Anything else?

No response

[nickgros]

@BlackBerryID I don't see the same issue in this equivalent playground example

Does the issue still happen if you treat the Form component as fully controlled? i.e. store formData in a useState and update it using the onChange prop

[BlackBerryID]

@nickgros The problem was in rjsf version 5.15.0. In onChange callback old value of retrievedSchema was passed to this.validate (instead of new one in _retrievedSchema variable).

onChange = (formData: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
    const { schemaUtils, schema, retrievedSchema } = this.state;

    if (isObject(formData) || Array.isArray(formData)) {
      const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
      formData = newState.formData;
    }

    const mustValidate = !noValidate && liveValidate;
    let state: Partial<FormState<T, S, F>> = { formData, schema };
    let newFormData = formData;

    let _retrievedSchema: S | undefined;
    if (omitExtraData === true && liveOmit === true) {
      _retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
      const pathSchema = schemaUtils.toPathSchema(_retrievedSchema, '', formData);

      const fieldNames = this.getFieldNames(pathSchema, formData);

      newFormData = this.getUsedFormData(formData, fieldNames);
      state = {
        formData: newFormData,
      };
    }

    if (mustValidate) {
      const schemaValidation = this.validate(newFormData, schema, schemaUtils, retrievedSchema);

Solution: I bumped rjsf version to 5.21.1 and everything works fine.

P.S. I found unused variable and created PR (#4320)