[BUG] Datagrid in editForm has undefined row

[tkalmar]

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [x] Local deployment
    • Version: 4.14.12
• Formio.js version: 4.14.12
• Frontend framework: VanillaJs
• Browser: Firefox
• Browser version: 108.0.2

I have a textfield with the following additional properties:

properties: {
  foo: [{ bar: "Barvalue", baz: true },{ bar: "Barvalue2", baz: false }]

added the following form to the editForm of textfield:

{
  "weight": -1,
  "label": "Data Grid",
  "hideLabel": true,
  "disableAddingRemovingRows": true,
  "reorder": false,
  "addAnotherPosition": "bottom",
  "layoutFixed": false,
  "enableRowGroups": false,
  "initEmpty": false,
  "tableView": false,
  "defaultValue": [],
  "calculateValue": "value = instance.data.properties.foo",
  "customConditional": "show = instance.data.properties && instance.data.properties.foo && instance.data.properties.foo.length;",
  "key": "datagrid",
  "type": "datagrid",
  "input": true,
  "components": [
    {
      "title": "Foo",
      "collapsible": true,
      "key": "foo",
      "type": "panel",
      "input": false,
      "tableView": false,
      "customConditional": "if (row) { component.title='Foo ' + (row.bar) || ''); component.customClass= row.baz ? 'ruleBazOn':'ruleBazOff';}\nshow = true;",
      "components": [
        {
          "label": "Bar",
          "tableView": true,
          "key": "bar",
          "type": "textfield",
          "disabled": true
        },
        {
          "label": "Baz",
          "tooltip": "Is there Baz?",
          "tableView": false,
          "key": "baz",
          "type": "checkbox",
          "input": true
        }
      ],
      "collapsed": true
    }
  ]
}

added to the textfield editform as

{
        key: 'conditional',
        components: [fooForm],
      },

When i open the edit form of the textfield the first row is undefined (until i expand the Foo form) then suddenly the title of the panel changes from Foo undefined to Foo Barvalue

The second (and subsequent) panel is rendered correctly

Steps to Reproduce

1. create a textfield with the given props
2. add the form to the textfield Editform
3. open the edit Form

Expected behavior

All Foo Panel are rendered correctly on opening

Observed behavior

The first Foo panel has no Data until opened

Example

Screenshot

[tkalmar]

If i change the initEmpty to true in the datagrid everything works

[daneformio]

@tkalmar Is your issue resolved with that property change on the data grid?

[tkalmar]

Is it supposed to only work this way? Then yes.