bug: group-array only supports an array of objects

[juicycleff]

{
  $schema: 'http://json-schema.org/draft-04/schema#',
  $id: 'https://example.com/employee.schema.json',
  title: 'Input',
  description: 'Soooooooo meee',
  type: 'object',
  properties: {
    id: {
      description: 'A unique identifier for an employee',
      type: 'number',
    },
    name: {
      description: 'Full name of the employee',
      type: 'string',
    },
    age: {
      description: 'Age of the employee',
      placeholder: 'Age of the employee',
      type: 'number',
    },
    maggies: {
      description: 'maggies of the employee',
      type: 'object',
      properties: {
        name: {
          description: 'Full name of the employee',
          type: 'string',
        },
        age: {
          description: 'Age of the employee',
          placeholder: 'Age of the employee',
          type: 'number',
        },
      },
    },
    dependent_details: {
      items: {
        properties: {
          birthdate: {
            description: 'Enter your child’s date of birth',
            format: 'date',
            'x-jsf-presentation': {
              inputType: 'date',
            },
            title: 'Child Birthdate',
            type: 'string',
            maxLength: 255,
          },
          full_name: {
            description: 'Enter your child’s full name',
            'x-jsf-presentation': {
              inputType: 'text',
            },
            title: 'Child Full Name',
            type: 'string',
            maxLength: 255,
          },
          sex: {
            description:
              'We know sex is non-binary but for insurance and payroll purposes, we need to collect this information.',
            enum: ['female', 'male'],
            'x-jsf-presentation': {
              inputType: 'radio',
              options: [
                {
                  label: 'Male',
                  value: 'male',
                },
                {
                  label: 'Female',
                  value: 'female',
                },
              ],
            },
            title: 'Child Sex',
          },
        },
        'x-jsf-order': ['full_name', 'birthdate', 'sex'],
        required: ['full_name', 'birthdate', 'sex'],
        type: 'object',
      },
      'x-jsf-presentation': {
        inputType: 'group-array',
        addFieldText: 'Add new field',
      },
      title: 'Child details',
      description: 'Add the dependents you claim below',
      type: 'array',
    },
    optional_dependent_details: {
      items: {
        properties: {
          birthdate: {
            description: 'Enter your child’s date of birth',
            format: 'date',
            'x-jsf-presentation': {
              inputType: 'date',
            },
            title: 'Child Birthdate',
            type: 'string',
            maxLength: 255,
          },
          full_name: {
            description: 'Enter your child’s full name',
            'x-jsf-presentation': {
              inputType: 'text',
            },
            title: 'Child Full Name',
            type: 'string',
            maxLength: 255,
          },
          sex: {
            description:
              'We know sex is non-binary but for insurance and payroll purposes, we need to collect this information.',
            enum: ['female', 'male'],
            'x-jsf-presentation': {
              inputType: 'radio',
              options: [
                {
                  label: 'Male',
                  value: 'male',
                },
                {
                  label: 'Female',
                  value: 'female',
                },
              ],
            },
            title: 'Child Sex',
          },
        },
        'x-jsf-order': ['full_name', 'birthdate', 'sex'],
        required: ['full_name', 'birthdate', 'sex'],
        type: 'object',
      },
      'x-jsf-presentation': {
        inputType: 'group-array',
        addFieldText: 'Add new field',
      },
      title: 'Child details (optional)',
      description:
        'This is an optional group-array. For a better UX, this Component asks a Yes/No question before allowing to add new field entries.',
      type: 'array',
    },
    hobbies: {
      description: 'Hobbies of the employee',
      type: 'object',
      properties: {
        indoor: {
          type: 'array',
          items: {
            'x-jsf-presentation': {
              inputType: 'text',
            },
            description: 'List of indoor hobbies',
            type: 'string',
          },
        },
        outdoor: {
          type: 'array',
          title: 'Child details',
          description: 'List of outdoor hobbies',
          items: {
            description: 'List of outdoor hobbies',
            type: 'object',
            properties: {
              indoor: {
                type: 'array',
                items: {
                  description: 'List of indoor hobbies',
                  type: 'string',
                },
              },
              outdoor: {
                type: 'array',
                items: {
                  description: 'List of outdoor hobbies',
                  type: 'string',
                },
              },
            },
          },
        },
        maggies: {
          description: 'Hobbies of the employee',
          type: 'object',
          properties: {
            indoor: {
              type: 'array',
              items: {
                description: 'List of indoor hobbies',
                type: 'string',
              },
            },
            outdoor: {
              type: 'array',
              items: {
                description: 'List of outdoor hobbies',
                type: 'string',
              },
            },
          },
        },
      },
    },
  },
  required: ['id'],
}

The above schema breaks the form due to this part here

outdoor: {
          type: 'array',
          title: 'Child details',
          description: 'List of outdoor hobbies',
          items: {
            description: 'List of outdoor hobbies',
            type: 'object',
            properties: {
              indoor: {
                type: 'array',
                items: {
                  description: 'List of indoor hobbies',
                  type: 'string',
                },
              },
              outdoor: {
                type: 'array',
                items: {
                  description: 'List of outdoor hobbies',
                  type: 'string',
                },
              },
            },
          },
        },

Would have loved to make a fix, but I'm encumbered

[sandrina-p]

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.

---

I've created an internal issue

[jguddas]

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

[sandrina-p]

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

[jguddas]

@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

[sandrina-p]

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.