bug: breaks with complex schema about json-schema-form HOT 5 OPEN

Hi @juicycleff !

Indeed, JSF does have two limitations around group-array fields ("type": "array").

First, currently, the group-array field only accepts a list of objects. (like in this demo, where each item is {full_name, birthdate, sex}.

So, even a simpler JSON Schema like the following — an array of strings — would break in the JSF:

{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "hobbies": {
      "items": {
        "title": "Hobby name",
        "type": "string"
      },
      "x-jsf-presentation": {
        "inputType": "group-array",
        "addFieldText": "Add new hoddy"
      },
      "title": "Hobbies",
      "type": "array"
    }
  },
  "required": ["hobbies"]
}

A workaround could be changing the structure to:

{
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "hobbies": {
      "items": {
        "properties": {
          "name": {
            "title": "Hobby name",
            "type": "string"
          }
        }
      },
      "x-jsf-presentation": {
        "inputType": "group-array",
        "addFieldText": "Add new hoddy"
      },
      "title": "Hobbies",
      "type": "array"
    }
  },
  "required": [
    "hobbies"
  ]
}

I'm not saying this is the fix, I'm just saying this is a workaround, which I understand might not be ideal for you because the JSON structure would change

// Before (not supported)
{ "hoobies": ["read", "video games"]}`
// Now (workaround)
- { "hoobies": [ {name: "read"}, {name: "video games"} ] }

The other JSF limitation is that currently group-array do not work inside fieldsets (which is in your example with hobbies.indoor[]. Let's look at the shortest JSON Schema snippet:

{
  "title": "My Form",
  "type": "object",
  "properties": {
    "hobbies": {
      "title": "Hobbies of employee",
      "type": "object",
      "properties": {
        "indoor": {
          "type": "array",
          "items": {
            "properties": {
              "name": {
                "title": "Hobby name",
                "type": "string"
              }
            }
          }
        }
      }
    }
  }
}

This breaks to render in the Playground, because as the error says Objects are not valid as a React child (found: TypeError: innerFields.forEach is not a function). If you meant to render a collection of children, use an array instead. — The error is not intuitive, but basically it fails to loop innerFields (group arrays) inside fieldsets. :/

The good news is that this bug is on our internal backlog too. I don't have a timeline for you though. Hopefully by the end of the year.

I'm sorry for not giving the answer you are looking for. This was just a dump of analyses/explanations around this bug.

from json-schema-form.

Any plans for better errors with traces to where in the schema the problem originates from?

from json-schema-form.

@jguddas what do you mean? Can you give an example? For example, the example above, you can see the error and trace-it in the dev tools.

from json-schema-form.

@jguddas what do you mean? Can you give an example? For example, the example above, you can see the error and trace-it in the dev tools.

An AJV style error might look something like this:

- JSON Schema invalid TypeError: innerFields.forEach is not a function
+ JSON Schema invalid: data/properties/hobbies/items/type must be object

from json-schema-form.

I believe we are talking about different things: this is not an error with JSON Schema (it's valid!). It's a run-time error with the json-schema-form internals that doesn't support (yet) the given JSON Schema structure.

We could leave a DX error, yes, saying that for now, it must be an object, but that's a different issue. I've created an issue dedicated to it: #29

Regarding timelines, we don't know yet as the team is currently busy with other projects. Probably still this year.

from json-schema-form.