ToErrorList doesn't return array errors

[kyliem29]

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

Current Behavior

Given the following ErrorSchema

const errorSchema = {
    "array": [
        {
            "field": {
                "__errors": [
                    "is required"
                ]
            }
        }
    ]
}

import { toErrorList } from '@rjsf/utils';
toErrorList(errorSchema); //Returns empty array

Returns empty array

Expected Behavior

Given the following ErrorSchema

const errorSchema = {
    "array": [
        {
            "field": {
                "__errors": [
                    "is required"
                ]
            }
        }
    ]
}

import { toErrorList } from '@rjsf/utils';
toErrorList(errorSchema); //Returns empty array

should return

[{
    "property": ".array.0.field", 
    "message": "is required", 
    "stack": ".array.0.field is required"
}]

Steps To Reproduce

1. Pass ErrorSchema to form instance via extra errors with array errors
2. ErrorListTemplate not displaying array errors

https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJhcnJheSI6W3t9XSwiZmlyc3ROYW1lIjoiQ2h1Y2siLCJsYXN0TmFtZSI6Ik5vcnJpcyIsImFnZSI6NzUsImJpbyI6IlJvdW5kaG91c2Uga2lja2luZyBhc3NlcyBzaW5jZSAxOTQwIiwicGFzc3dvcmQiOiJub25lZWQifSwic2NoZW1hIjp7InR5cGUiOiJvYmplY3QiLCJwcm9wZXJ0aWVzIjp7ImJhc2ljRmllbGQiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiQmFzaWMgZmllbGQifSwiYXJyYXkiOnsibWluSXRlbXMiOjEsInR5cGUiOiJhcnJheSIsInRpdGxlIjoiQSBsaXN0IG9mIHN0cmluZ3MiLCJpdGVtcyI6eyJ0eXBlIjoib2JqZWN0IiwicmVxdWlyZWQiOlsiZmllbGQiXSwicHJvcGVydGllcyI6eyJmaWVsZCI6eyJ0eXBlIjoic3RyaW5nIiwidGl0bGUiOiJTdHJpbmcgZmllbGQifX19fX19LCJ1aVNjaGVtYSI6e30sInRoZW1lIjoiZGVmYXVsdCIsImxpdmVTZXR0aW5ncyI6eyJzaG93RXJyb3JMaXN0IjoidG9wIiwiZXhwZXJpbWVudGFsX2RlZmF1bHRGb3JtU3RhdGVCZWhhdmlvciI6eyJhcnJheU1pbkl0ZW1zIjp7InBvcHVsYXRlIjoicG9wdWxhdGUiLCJtZXJnZUV4dHJhRGVmYXVsdHMiOmZhbHNlfSwiYWxsT2YiOiJza2lwRGVmYXVsdHMiLCJlbXB0eU9iamVjdEZpZWxkcyI6InBvcHVsYXRlQWxsRGVmYXVsdHMifSwibm9IdG1sNVZhbGlkYXRlIjp0cnVlfX0=

Environment

Playground

Anything else?

My understanding is that it's treating arrays as the errors and as such is ignoring the array structure.
It's only noticeable when you define the errors in the extra errors. The errors appear correctly on the form field but are missing in the error field template

[heath-freenome]

@kyliem29 I'm pretty sure that errors need to be objects not arrays. Does this work for you?

const errorSchema = {
    "array": {
        "0": {
            "field": {
                "__errors": [
                    "is required"
                ]
            }
        }
    }
}

Also, if you use the ErrorSchemaBuilder utility it should build proper schema for you

[kyliem29]

Thanks for specifying that.
I am using the ErrorSchemaBuilder however I'm not able to produce that shape

const errorSchemaBuilder = new ErrorSchemaBuilder();
errorSchemaBuilder.addErrors('is required', 'array[0].field');
console.log(errorSchemaBuilder.ErrorSchema);

returns

{
    "array": [
        {
            "field2": {
                "__errors": [
                    "is required"
                ]
            }
        }
    ]
}

Is the issue with the ErrorSchemaBuilder then?
addErrors path also only accepts string or string[] so to match the path specified in the linked doco it should also support numbers in the array?

errorSchemaBuilder.addErrors('is required', ['array', 0, 'field']);

[heath-freenome]

@kyliem29 Does using the string equivalent of 0 (i.e. "0") work? I'm pretty sure the javascript object assumes all keys are strings.

[kyliem29]

All the following still return the same invalid structure

errorSchemaBuilder.addErrors('is required', 'array.0.field');
errorSchemaBuilder.addErrors('is required', ['array', '0', 'field']);
errorSchemaBuilder.addErrors('is required', 'array["0"].field');

[kyliem29]

I believe the issue is that the ErrorSchemaBuilder has to create the path structure.
If I pass in an object that already has the array on it, its able to update it correctly. But this doesnt work for my scenario, as I start with an empty ErrorSchemaBuilder.

const errorSchemaBuilder = new ErrorSchemaBuilder({
    array: {
        0: {
            otherField: {
                __errors: [
                    'is required',
                ],
            },
        },
    },
});
errorSchemaBuilder.addErrors('is required', ['array', '0', 'field']);

{
    "array": {
        "0": {
            "otherField": {
                "__errors": [
                    "is required"
                ]
            },
            "field": {
                "__errors": [
                    "is required"
                ]
            }
        }
    }
}

Perhaps using lodash setWith would help to customise the creation of the arrays?

[heath-freenome]

@kyliem29 Sounds like we just need to update the API to support an array of string | number. Are you willing push a PR for that?

[kyliem29]

Sure! This is my first contribution so please let me know if I can improve anything.