Uncaught RangeError: Maximum call stack size exceeded when oneOf contains a very large number of items

[alxdru]

Describe the bug

When trying to load a schema with a oneOf field specifying a list of over 300 items (approximately) and validation mode: ValidateAndShow, it fails to render the form with the following errors:

Uncaught RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

Expected behavior

In this case I am expecting it to be able to render a list of 500 items at least including validations without issues.

Steps to reproduce the issue

Use a json schema with a oneOf that specifies 500 items to make sure you reproduce.
Something like below

{
    "type": "object",
    "properties": {
        "field": {
            "title": "Destination",
            "type": "string",
            "oneOf": [] // Can specify 500 items to reproduce the issue
        },
 }
}

Screenshots

No response

Which Version of JSON Forms are you using?

v3.1.0

Framework

No response

RendererSet

No response

Additional context

I could successfully render with less than 300 items in the oneOf field, or just by disabling the validation which is not an option unfortunately.
I've also traced some similar issues in the ajv library that handles validation here ajv-validator/ajv#1581 (comment) . Note that I've tried the proposed resolutions at the link and they do not work in this case.

[sdirix]

As you noticed, the error comes from the validation framework Ajv we are using. See this open issue (ajv-validator/ajv#1705) for more details.

There’s not much we can do about that except for waiting for a fix. However there are some workarounds you can use:

• Restructure your schema to not use so many oneOf. Instead use enum. If you used the oneOf constructs to render different labels for your enums, you can use the JSON Forms i18n support instead to deliver alternative labels for the enums. Or,
• Turn off validation within JSON Forms by handing over validationMode="NoValidation". Then whenever you receive a data event from JSON Forms, you can validate it yourself outside. You can also use AJV for this. Once validated, you hand over the determined errors via the additionalErrors prop back to JsonForms. The clue: You validate with a modified schema in which you removed the oneOf construct. You will lose the validation for that specific part, but all the remaining validations will work as before.

[alxdru]

@sdirix Thanks for the quick response.
While those are very good workarounds, as part of the explanation I should've added that the forms are always dynamic and there's no control over the schema definition being used. I can't control how many oneOf constructs the forms would have.

Just to put it out there, if it helps anybody else. I've tried to bypass the issue by using $ref and dividing the long oneOf list into multiple smaller size ones. It did render the form with validations in this case. Although, the UX of the form changes by having a couple of tabs to choose from for that particular dropdown.

[sdirix]

While those are very good workarounds, as part of the explanation I should've added that the forms are always dynamic and there's no control over the schema definition being used. I can't control how many oneOf constructs the forms would have

You can use the second workaround I posted and just always activate it whenever there is a oneOf with more than X entries in your retrieved schema. There really is no downside to that workaround besides the loss of validation for the oneOf. That validation is almost always meaningless anyway as the UI already makes sure that only a valid value is stored in the form data.

[alxdru]

@sdirix
Hi Stefan,
Just coming back with updates, the workaround you proposed is a good solution.
We're only losing validation for the oneOfs that are too long, but it doesn't feel like a big loss.
Thank you!