Edit Grid on save row o.push is not a function

[KyooMario]

We have integrated formiojs in Salesforce and in Sharepoint. And it works fine. In Sharepoint we get an error in the Edit Grid module when saving a row. (In Salesforce this is working fine.) The error message is: formio.full.min.js:102 Uncaught TypeError: o.push is not a function at n.value (formio.full.min.js:102) at HTMLButtonElement. (formio.full.min.js:102)

Can you advise where to investigate? We have tested: https://unpkg.com/formiojs@latest/dist/formio.full.min.js

Kind regards, Mario

[randallknutson]

Do you have an example form where this is occurring?

[KyooMario]

Hello Randall,

If you mean the formtemplate see below:

"FormViewTemplate" : {
    "components" : [{
            "label" : "NormEigenschappen",
            "tableView" : false,
            "key" : "NormEigenschappen",
            "type" : "editgrid",
            "input" : true,
            "components" : [{
                    "label" : "NormEigenschap",
                    "cellAlignment" : "left",
                    "tableView" : false,
                    "key" : "NormEigenschap",
                    "type" : "table",
                    "numRows" : 1,
                    "input" : false,
                    "rows" : [[{
                                "components" : [{
                                        "label" : "Categorie",
                                        "widget" : "choicesjs",
                                        "tableView" : true,
                                        "data" : {
                                            "values" : [{
                                                    "value" : "Materiaal",
                                                    "label" : "Materiaal"
                                                }, {
                                                    "label" : "Constructie",
                                                    "value" : "Constructie"
                                                }
                                            ]
                                        },
                                        "selectThreshold" : 0.3,
                                        "key" : "categorie",
                                        "type" : "select",
                                        "indexeddb" : {
                                            "filter" : {}
                                        },
                                        "input" : true
                                    }
                                ]
                            }, {
                                "components" : []
                            }, {
                                "components" : []
                            }
                        ]]
                }
            ]
        }, {
            "type" : "button",
            "label" : "Submit",
            "key" : "submit",
            "disableOnInvalid" : true,
            "input" : true,
            "tableView" : false
        }
    ]
},

[KyooMario]

Hello Randall,

I did a deeper investigation and logged the following in the EditGrid.js

`if (!this.component.inlineEdit) { var dataValue = this.dataValue || []; console.log('dataValue: '+dataValue);

    if (editRow.editing) {
      dataValue[rowIndex] = editRow.data;
    } else {
      // Insert this row into its proper place.
      var newIndex = dataValue.length;
      console.log('newIndex: '+newIndex);
      dataValue.push(editRow.data);
      this.editRows.splice(rowIndex, 1);
      this.editRows.splice(newIndex, 0, editRow);
      rowIndex = newIndex;
    }
  }`

The result logging is: dataValue: null newIndex: 4

Probably the dataValue: null is causing the n.push to fail?

Does this help?

Kind regards, Mario

[KyooMario]

I have extended the logging a bit more:

`key: "saveRow", value: function saveRow(rowIndex) { console.log('rowIndex: '+rowIndex); var editRow = this.editRows[rowIndex]; console.log('editRow: '+editRow); console.log('editRow.dirty: '+editRow.dirty); console.log('editRow.isOpen: '+editRow.isOpen); console.log('this.options.readOnly: '+this.options.readOnly);

  if (this.options.readOnly) {
    editRow.dirty = false;
    editRow.isOpen = false;
    this.redraw();
    return;
  }

  editRow.dirty = true;

  if (!!this.validateRow(editRow, true) !== true) {
    return false;
  }

  if (!this.component.inlineEdit) {
    var dataValue = this.dataValue || [];
    console.log('dataValue: '+dataValue);
    console.log('editRow.data: '+JSON.stringify(editRow.data));

    if (editRow.editing) {
      dataValue[rowIndex] = editRow.data;
    } else {
      // Insert this row into its proper place.
      var newIndex = dataValue.length;
      console.log('newIndex: '+newIndex);
      dataValue.push(editRow.data);
      this.editRows.splice(rowIndex, 1);
      this.editRows.splice(newIndex, 0, editRow);
      rowIndex = newIndex;
    }
  }`

And the result: rowIndex: 0 editRow: [object Object] editRow.dirty: undefined editRow.isOpen: true this.options.readOnly: false dataValue: null editRow.data: {"categorie":"","type":"","intNorm":""} newIndex: 4

[randallknutson]

Thanks for the additional debugging! That does help us understand this a bit. I'm not sure why this is happening still so let me see if we can test it out and reproduce this.

[KyooMario]

Thanks. And just to be clear: I have got 2 integrations 1=Salesforce which works fine and 1=Sharepoint/framework7 which is giving me the trouble. It seems the var dataValue = this.dataValue || []; is causing it. When I just do var dataValue = []; the n.push error is gone. But in that case the datavalue is not stored so everytime I want to edit the row it starts of with the empty [] of course. So I am not sure where the initial dataValue is set. Maybe you can point me So I can look further?

Kind regards, Mario

[KyooMario]

I just keep you updated on my findings. Maybe you get a hint.

When opening the form in the code snippet below: this.dataValue = empty But after I "add another" row this.dataValue = null Which causes the issue.

` key: "render", value: function render(children) { if (this.builderMode) { return _get(_getPrototypeOf(EditGridComponent.prototype), "render", this).call(this); }

  var dataValue = this.dataValue || [];`

[KyooMario]

Hello Randall,

I have got the issue: When you add the EditGrid component on the form and leave the Api name as it is "editGrid" it works fine. When I change the name to something else I get the issue.

I have tested this in your formbuilder: https://formio.github.io/formio.js/app/builder And there it seems to work fine also.

I will update my code to your latest and test it again.

Kind regards, Mario

[KyooMario]

Hello Randall,

I have downloaded the latest npm "version": "4.12.0" and in that version the issue still exists. When I use a different api name then "editGrid" I get the issue.

Any advise how to proceed? Should I compare the latest release and look for differences?

Kind regards, Mario

[KyooMario]

Hello Randall,

Before making another issue. I have an (old) error with ace: "ace.js" Refused to create a worker from 'blob' Can you advise how to resolve this?

Kind regards, Mario

[KyooMario]

Hello Randall,

OK. I have found the issue. It seems stupid though: In the EditGrid configuration. When I name the display label like "NormEigenschappen" And I give the api property name the same "NormEigenschappen" Then I get the issue When I give the api property name "normEigenschappen" The issue is gone.

Can you shine a light?

Kind regards, Mario

[wag110894]

@KyooMario,

Get to hear that you found the issue, would you be able to create a PR so that we can get this on our next build?

Looking forward to your response.

[KyooMario]

Hello Will,

I could If I knew how to. And further I found the issue but not the real cause and not the fix. And because it seems a silly thing I would like you guys to take a look at it first.

Kind regards, Mario

[travist]

Since there is a workaround, I am not sure this would ever make it to the top of our developers list to resolve. If someone from the community submits a pull request, then we would be happy to accept it as a contribution.

[KyooMario]

Hello Travis,

It seems an incident. Can I suggest that I keep checking and if it returns on a larger scale I re-open the issue?

Kind regards, Mario

[travist]

Yes sounds good.