How to fix this CSS bug in material renderer?

General
1

Hi JSONForms community, I noticed a difference in CSS for how arrays of anyOfs and arrays of strings are rendered.

image
image949×335 8.97 KB

schema:

{
  "type": "object",
  "properties": {
    "anyOfArray": {
      "title": "Array of anyOf",
      "type": "array",
      "items": {
        "anyOf": [{ "type": "string" }]
      }
    },
    "stringArray": {
      "title": "Array of string",
      "type": "array",
      "items": { "type": "string" }
    }
  }
}

I’m stuck trying find out where this issue stems from and how I can override and fix it. I’m still learning the ropes to this library and json schemas, any help would be greatly appreciated!

2

Hi @turtle, the difference comes in because two different renderers are used here.

In stringArray we recognize that this is an array of string primitives. Therefore the Table renderer is used, rendering a string cell for each entry.

In anyOfArray we see that this is an array of something complex so the array layout renderer is used. This one dispatches to the AnyOfRenderer for each entry which will then eventually render the string input.

We currently have no optimization or special logic to detect whenever an anyOf, allOf etc. could be simplified. If you want to have something like this you could:

  • Analyze and simplify the JSON Schema before handing it over to JSON Forms
  • Register custom renderers for this special patterns which will then dispatch to the existing renderers